Vue学习第一课：Vue安装

一、两种推荐引入Vuejs的方法

• 菜鸟教程推荐：<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
• Vue官方网站推荐（生产环境版本，优化了尺寸和速度）：<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

 

二、npm安装Vuejs

1.  由于 npm 安装速度慢，推荐使用了淘宝的镜像及其命令 cnpm（详见Vue安装注意事项）：
   

   # 查看版本
   npm -v
   2.3.0
   
   #升级 npm
   cnpm install npm -g
   
   # 升级或安装 cnpm
   npm install cnpm -g
   
   

   # 在用 Vue.js 构建大型应用时推荐使用 cnpm 安装
   cnpm install vue

2. 命令行工具：Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用：
   

   # 全局安装 vue-cli
   cnpm install --global vue-cli
   # 创建一个基于 webpack 模板的新项目
   vue init webpack my-project
   # 这里需要进行一些配置，默认回车即可
   This will install Vue 2.x version of the template.
   
   For Vue 1.x use: vue init webpack#1.0 my-project
   
   ? Project name my-project
   ? Project description A Vue.js project
   ? Author runoob <test@runoob.com>
   ? Vue build standalone
   ? Use ESLint to lint your code? Yes
   ? Pick an ESLint preset Standard
   ? Setup unit tests with Karma + Mocha? Yes
   ? Setup e2e tests with Nightwatch? Yes
   
      vue-cli · Generated "my-project".
   
      To get started:
      
        cd my-project
        npm install
        npm run dev
      
      Documentation can be found at https://vuejs-templates.github.io/webpack
   

   进入项目，安装并运行：

   cd my-project
   cnpm install
   cnpm run dev
    DONE  Compiled successfully in 4388ms
   
   > Listening at http://localhost:8080
   

3. Vue项目打包：
   

   npm run build
   

   执行完成后，会在 Vue 项目下生成一个 dist 目录，一般包含 index.html 文件及 static 目录，static 目录包含了静态文件 js、css 以及图片目录 images：
   

   如果直接双击 index.html 打开浏览器，页面可能是空白了，想要修改下 index.html 文件中 js、css 路径即可。

   例如我们打开 dist/index.html 文件看到路径是绝对路径：

   #更改前
   <link href=/static/css/app.33da80d69744798940b135da93bc7b98.css rel=stylesheet>
   <script type=text/javascript src=/static/js/app.717bb358ddc19e181140.js></script>
   
   #我们把 js、css 路径路径修改为相对路径：
   <link href=static/css/app.33da80d69744798940b135da93bc7b98.css rel=stylesheet>
   <script type=text/javascript src=static/js/app.717bb358ddc19e181140.js></script>