[ vue.js ] （一）安装

vue 开发环境搭建

---

安装 nodejs

• 官网下载安装包，直接 下一步 即可
• https://nodejs.org/en/
  

安装cnpm

---

淘宝 NPM 镜像

• 可以使用 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

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

安装 vue

---

vue-cli 2.0 和 vue-cli 3.0 二选一安装就行

vue-cli 2.0

npm install -g vue-cli

vue-cli 3.0

npm install @vue/cli -g

• vue-cli 3.0 可以用 可视化面板 创建并管理项目
• 启动可视化面板
  

vue-cli 2.0 创建vue项目

vue init webpack vue_demo

webpack 类似 java 中的 maven
创建好的 vue 项目是可以直接运行的

vue-cli 2.0 运行vue项目

npm run dev
或 
npm start

下载安装依赖

---

npm install

--verbose 命令，来查看运行细节：
npm install --verbose

npm下载缓慢的话，可以使用淘宝npm源
npm install --registry=https://registry.npm.taobao.org

根据package.json文件

项目打包

---

• 直接使用下面命令,就可以把vue项目打包
• 打包完成后的项目生成在 dist 目录下

npm run build

Webpack下的Vuejs项目文件结构

---

▸ build/                // 编译用到的脚本
▸ config/               // 各种配置
▸ dist/                 // 打包后的文件夹
▸ node_modules/         // node第三方包
▸ src/                  // 源代码
▸ static/               // 静态文件, 暂时无用
▸ index.html            // 最外层文件
▸ package.json          // node项目配置文件

备注：
1、常用第三方库安装：
npm install stylus stylus-loader -D
npm install axios --save
2、去掉访问路径中的#：
router中添加 mode：‘history’
3、常用指令
-g 指全局安装
–save = -S 安装运行依赖
–save-dev = -D 安装开发依赖

---