创建一个Vue项目步骤

保证一个前提：
当前的运行环境中，必须先全局安装webpack
npm install webpack -g
npm install webpack-cli -g

vue-cli 是依赖于webpack

全局安装模块之后，任意一个文件位置都可以使用这个命令

1.全局安装vue-cli模块 和 vue/cli-init模块
    cli：commond-line interface 命令行界面

    npm install @vue/cli -g   // 操作vue的模块
    npm install @vue/cli-init -g   // 初始化vue项目的模块

2.在当前文件下打开cmd命令，(可以手动创建vue项目文件夹，也可以通过命令行创建)
    vue -V :查看vue的版本信息(判断计算机中是否有vue指令)

3. 创建vue项目
    vue create xxxxx
    xxxxx:项目名称，比如myvue
    在初始化过程中，其中是否使用eslint, 单元测试，端到端测试，设置为No

4. 运行vue项目(调试环境)
    npm run dev
    端口号自动刷新，随机端口号

在Node项目中，默认模块包的出口是内部的index.js，与默认的首页是index.html一样

当vue项目运行时，该项目的入口文件默认是src中的main.js
    类似于node项目中默认的入口文件是index.js一样

凡是.vue文件，都是vue文件，这种文件，被称为单文件组件，将页面中的组件单独隔离出来，放置：组件的模板内容、组件的模板数据、组件的样式

由三部分构成：
1.<template> </template>
    作用：放置组件的模板内容，等价于<script id=com type=text/html>标签对
    注意事项：只有一个根元素，可以取id和class

2.<script> </script>
    作用：设置组件的其他数据内容，比如data, methods, computed,生命周期钩子函数等，并当当前数据直接导出
    export default 设置默认的导出，导入时，自定义变量名即可导入

3.<style> </style>
    作用：设置组件的样式，默认情况下，任何组件都可以使用当前样式
    如果需要样式仅限于当前组件使用，需要加scoped属性，即<style scoped>

componets文件夹中，通常放置的是页面中的构成部分组件
页面组件，放置在页面文件夹中

单文件组件在导入时，可以不用加.vue后缀，程序会自动识别
js文件在导入时，可以不用加.js后缀，程序会自动识别
凡是static文件夹中的资源，使用/static直接引入
放在assets文件夹中的资源，直接import ./assets导入