Vue工程化项目_普通vue和vue工程化项目

脚手架安装与项目创建

1. 安装

cnpm i -g @vue/cli
1

2. 创建项目

vue create 项目名称
1

创建项目过程的选项
（1）自定义安装
（2）选择安装的模块（按空格选中，按回车下一步），然后选择version,Babel,Router,Vuex
（3）选择Vue版本，选择2.x（2.x是稳定版）
（4）选择路由模式是否为history，选择Y
（5）当前配置项的格式，选择package.json
（6）是否将整个安装流程保存为安装模板（下一次再创建项目就不需要这些流程了），建议选择N，因为根据项目需求不同，每次选择的内容也有所差别。

项目目录

• node_modules
  依赖管理目录
• public
  本地服务器的根目录，用于存放静态文件，例如HTML，CSS等。
• src（源码）
  |-- assets 存放图片，静态资源文件
  |-- components 公共组件
  |-- router 路由，用于跳转
  |-- store 全局静态管理
  |-- views 视图组件
  |-- App.vue 根组件
  |-- main.js 入口文件，用于引入全局依赖或全局配置
• package.json npm的配置文件

.vue文件里面有三部分（template，script，style），如下：

<template>
这写所有的HTML内容，但是里面只能有一个根节点，就是只能有一个跟div，在这个根div里面可以随便写内容。
  <div>
    {{ msg }}
  </div>
</template>

<script>
export default {
这里面写vue选项等内容。
没有el选项，因为template里面就只有一个根节点，管理的就是那一个节点。
data的写法和之前不同，是一个函数，然后返回一个对象。
  data(){
    return {
       msg: 'hello'
    }
  },
  methods : {
  
}
</script>

<style scoped>
这里写所有的CSS样式。
  scoped，只对当前组件的样式有效，不会影响别的组件的同名元素的样式。
  当不加scoped的时候，只有当当前组件加载过一次之后，才会影响别的组件的样式。否则，不会影响别的组件的样式。
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27