2.x版本的vue项目搭建

使用git搭建VueJS开发环境

安装git

git官网下载： [https://www.git-scm.com/download/](https://www.git-scm.com/download/)

安装后进入 git bash 终端

安装nodeJS

安装git后，我们需要使用npm工具，这时候就要安装nodeJS了，因为nodejs会自带npm工具。

nodeJS官网下载： [https://nodejs.org/en/download/](https://nodejs.org/en/download/)

之后就像安装软件一样安装就行了，成功后，可以在git bash终端中查看版本，显示了版本，就说明你已经安装成功了。

$ node -v

$ npm -v

安装webpack:最新版本

npm install --save-dev webpack

其他安装参考webpack官方文档：

[https://webpack.js.org/guides/installation/](https://webpack.js.org/guides/installation/)

安装vueJS

官方文档参考安装：

[https://cn.vuejs.org/v2/guide/installation.html](https://cn.vuejs.org/v2/guide/installation.html)

1. 独立版本

可在Vue.js官网上直接下载vue.min.js并用<script>标签引入。

下载Vue.js：[https://vuejs.org/js/vue.min.js](https://vuejs.org/js/vue.min.js)

2. 使用CDN

unpkg：[https://unpkg.com/vue/dist/vue.js](https://unpkg.com/vue/dist/vue.js), 会保持和npm发布的最新的版本一致。

3. NPM方法

觉得npm安装速度慢的话，也可以使用淘宝的镜像及其命令cnpm

使用淘宝NPM镜像：npm命令

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

搭建Vue工程

• 1. 安装脚手架vue-cli:
     

     • 全局安装脚手架vue-cli(命令行工具)： cnpm install

       $ cnpm install --global vue-cli

     • or npm install

       npm install -g @vue/cli

     • or yarn install

       yarn global add @vue/cli

注意：-g或者global表示全局安装，不加-g或global表示本项目安装

• Vue CLI 指南

  [https://cli.vuejs.org/guide/](https://cli.vuejs.org/guide/)

• 1. 初始化项目 Vue init <template-name> <project-name>

     Vue init webpack my-project

• 之后进行一些配置，默认回车就行，完成后终端有项目启动的提示。
  
  以为之前自己搭建项目环境的时候，使用npm install的时候太慢了，而且会报错，改下用淘宝镜像初始化就行了

  npm install --registry=https://registry.npm.taobao.org

  npm run dev

项目就搭建完成了！

当然如果你是用vue3.0版本的话，你的配置文件package.json就会自动生成命令

"scripts": { "build": "vue-cli-service build", "serve": "vue-cli-service serve" }

如果没有跑成功，就需要看看配置文件package.json中的配置是否有问题。

进阶一下下：

安装路由状态管理模块:

npm install vuex —save