win10下安装部署vuejs的webpack脚手架工具

参考vuejs的官方文档：戳我

1. 安装nodejs

• nodejs官方下载地址：戳我
• 选择合适的版本下载，我这里选的是node-v8.11.3-x64.msi
• 安装路径一般不装在C盘，所以我这里选择：D:\nodejs\
• 一路next默认等待安装完毕

2. 设置nodejs的global和cache路径

设置路径能够把通过npm安装的模块集中在一起，便于管理。

• 在nodejs的安装目录D:\nodejs\下，新建node_global和node_cache两个文件夹

• 执行指令：

  npm config set prefix "D:\nodejs\node_global"
  npm config set cache "D:\nodejs\node_cache"

  设置成功后，后续用命令npm install -g XXX安装的XXX模块就在D:\nodejs\node_global\node_modules里。

• 查看配置信息指令：npm config list

3. 设置环境变量

• 添加用户变量PATH：D:\nodejs\node_global
• 新增系统变量NODE_PATH：D:\nodejs\node_global\node_modules

4. 安装cnpm（可选）

由于许多npm包都在国外，直接使用npm指令下载安装会比较慢，好像很多人推荐用淘宝的镜像服务器，这样所有用npm的指令都可以用cnpm代替。我个人喜欢直接用npm所以没有安装，实测其实npm也挺快的啊=。=不想安装的小伙伴就跳过即可

• 参考网址：戳我
• 安装指令：npm install -g cnpm --registry=https://registry.npm.taobao.org

备注：-g表示下载安装的包都放在之前配置好的安装目录下，否则就会在执行指令的当前目录下

5. 安装vue-cli

• vue-cli是vuejs官方提供的一个命令行工具
• 安装指令：npm install -g vue-cli
• 安装完成后，vue就是一个指令了

D:\nodejs\node_global
λ npm install -g vue-cli
npm WARN deprecated [email protected]: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
D:\nodejs\node_global\vue -> D:\nodejs\node_global\node_modules\vue-cli\bin\vue
D:\nodejs\node_global\vue-init -> D:\nodejs\node_global\node_modules\vue-cli\bin\vue-init
D:\nodejs\node_global\vue-list -> D:\nodejs\node_global\node_modules\vue-cli\bin\vue-list
+ [email protected]
added 252 packages in 61.697s

6. 下载webpack脚手架

(1) 下载指令：vue init webpack learnVue

• 其中webpack是打包和压缩的工具模板，learnVue是工程文件夹名称
• 执行完会在当前目录下生成一个名为工程名称的文件夹，并下载好了模板，但相关依赖还没有安装

(2) 执行指令后会先提示下载中，大概几秒后会提示输入工程的相关信息：

• project name：工程名（不是文件夹名），不可以含有大写字母，后续是页面的title
• vue-router：vuejs提供的路由工具，我选择安装，相关介绍可戳这里
• ESLint：好像是一个语法检查选项，我不安装
• unit tests和e2e tests：好像都是测试项，我也没有安装
• 最后一个选项是推荐相关依赖后续使用npm install指令安装，选择Yes, use npm

(3) 然后等待一段时间即完成下载

F:\develop
λ vue init webpack learnVue

? Project name learn-vue
? Project description my first vue project
? Author yvettre
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "learnVue".


# Installing project dependencies ...
# ========================

npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN notice [SECURITY] mime has the following vulnerability: 1 moderate. Go here for more details: https://nodesecurity.io/advisories?search=mime&version=1.3.6 - Run `npm i npm@latest -g` to upgrade your npm version, and then `npm audit` to get more info.

> uglifyjs-webpack-plugin@0.4.6 postinstall F:\develop\learnVue\node_modules\webpack\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 1133 packages in 151.274s

# Project initialization finished!
# ========================

To get started:

  cd learnVue
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

(4) 下载完毕后可以打开工程文件看到如下图所示的目录结构，我们的代码就放在src这个文件夹中，其他文件夹都是一些依赖和工具，不需要关心

7. 下载webpack相关依赖

• 根目录下有一个package.json的文件：
  

• 要安装红色箭头所指的那些依赖项，安装指令是：npm install

F:\develop\learnVue
λ npm install
npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

up to date in 14.505s

8. 运行webpack的demo

F:\develop\learnVue
λ npm run dev


 DONE  Compiled successfully in 1637ms                                                                          21:14:46

 I  Your application is running here: http://localhost:8080

这样就运行起来啦，然后我们在浏览器中访问localhost:8080，即可看到：

至此，vuejs的webpack脚手架下载完毕，这套框架是支持热更新的（即修改完src的代码后，直接在页面刷新即可看到页面更新）。关于打包和压缩，有待以后学习。