vue-cli（详解）

总结一下vue-cli 脚手架使用过程

一、vue-cli安装的先决条件（不可缺）：

1、node环境，node版本大于等于4.0，官方推荐6.0；

2、npm版本大于3.0,；

3、Git

二、安装

1、全局安装webpack；

 

    $ npm i webpack -g 

2、全局安装vue-cli；

    $ npm install -g vue-cli

3、然后创建目录，在目录中运行指令，初始化项目

    $ vue init < template-name >  < project-name >

    例：

    $ vue init webpack my-project   （如果怎么都创建不成功，不能生成结构，可采取删去电脑本地的vue-cli（

$ npm uninstall -g vue-cli）重新下载（vue-cli脚手架））

安装成功，通过提示，一直enter即可。

4、模板的选择，一般情况采用上述的选择，

5、下载依赖 （等待时间稍微有点久）

    $ npm i 

• • webpack - 一个全功能的Webpack + vue-loader设置，带有热重新加载，linting，测试和css提取。

  • webpack-simple - 一个简单的Webpack + vue-loader设置，用于快速原型设计。

  • browserify -全功能Browserify + vueify设置用热重装载，掉毛＆单元测试。

  • browserify-simple - 一个简单的Browserify + vueify设置，用于快速原型制作。

  • pwa - 基于webpack模板的vue-cli的PWA模板

  • simple - 单个HTML文件中最简单的Vue设置

     

三、文件配置具体说明

    1、build——[webpack配置]

build文件主要webpack配置，npm run dev 就是运行的dev-sever.js；npm run build运行的是build.js。

    2、package.json 项目的基本信息，和依赖项

    3、config——[vue项目配置]

 index.js配置

 

^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

在码云创建项目 ：克隆到本地

不要点进去文件夹  就在此处打开命令窗口 

• vue init webpack vue-demo（vue-demo 是刚刚clone下来的文件夹名字 ）
• Project name 项目名称（这个项目名称随便起 无所谓）
• Project description 项目简介
• Author 作者姓名
• Vue build 上一步之后 按回车就是这一步
• Install vue-router 是否安装路由 （肯定的）
• Use ESlint to lint your code 是否启用代码风格检测 （个人建议不启用，要求太严格，不利于开发效率）
• Set up unit tests 是否使用单元格检测 （我选择 n）
• Setup e2e tests with Nightwatch 一种单元格检测工具 （我选择 n）
• 到这一步可以选择 使用npm启动