Vue CLI从入坑到放弃 (1)vue create创建项目

目录

1 Vue CLI安装

2 Vue CLI使用vue create创建项目

3 Vue CLI项目运行

---

1 Vue CLI安装

    在cmd窗口输入：

npm install -g @vue/cli

    安装完成后可输入如下命令检查版本：

vue --version

2 Vue CLI使用vue create创建项目

    选择项目存放的目录，在cmd窗口输入：

vue create hello-world //hello-world可替换成其他项目名

    注意项目名中不能有大写字母。

    创建命令运行后可选择第一项进行默认设置创建。

    也可以↓到手动配置选项创建，手动配置项目中各选项说明如下：

选项	说明
Babel	转码器，用于ES6转ES5
TypeScript	由微软开发的开源编程语言，可以编译成纯JavaScript，是JavaScript的一个超集；TypeScript主要提供了类型系统和对ES6的支持。
Progressive Web App Support	支持渐进式Web应用程序
Router	vue-router
Vuex	Vue的状态管理
CSS Pre-processor	CSS预处理器
Linter/Formatter	代码风格检查和格式校验
Unit Testing	单元测试
E2E Testing	End to End测试

    创建的项目结构如下：

|-node_module                //项目依赖的模块
|-public                     //目录下的文件不会被Webpack编译压缩处理，存放引用的第三方库
|    |-favicom.ico           //图标文件
|    |-index.html            //项目主页面
|
|-src                        //项目代码的主目录
|    |-assets                //存放项目中的静态资源，如CSS、图片等
|    |    |-logo.png
|    |
|    |-components            //存放编写的组件
|    |    |-HelloWorld.vue
|    |
|    |-App.vue               //项目的根组件
|    |-main.js               //程序入口js文件，加载各种公共组件和所需要用到的插件
|
|-.browserslistrc            //配置项目目标浏览器的范围
|-.eslintrc.js               //ESLint使用的配置文件
|-.gitignore
|-babel.config,js            //Babel使用的配置文件
|-jsconfig.json
|-package.json               //npm的配置文件
|-package-lock.json          //用于锁定项目实际安装的各个npm包的具体来源和版本号
|-README.md                  //项目说明文件
|-vue.config.js

3 Vue CLI项目运行

    根据提示依次输入如下命令即可运行项目

>>cd hello-world
>>npm run serve

    若添加新组件，需使用驼峰命名规则，否则运行时可能会出现如下错误

error Component name "xxx" should always be multi-word vue/multi-word-component-names

    如果非要使用非驼峰命名，可在运行前使用如下命令进行错误修复

npm run lint --fix