vue相关环境搭建

Node.js安装

Node.js安装包及源码下载地址为：https://nodejs.org/en/download/

双击下载后的安装包，出现如下所示安装向导，接受协议、选择安装目录，一直下一步即可安装完成：

点击 Finish（完成）按钮退出安装向导。
检测PATH环境变量是否配置了Node.js，点击开始=》运行=》输入”cmd” => 输入命令”path”，输出如下结果,环境变量中已经包含了node。

.

npm安装

由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入 “npm -v” 来测试是否成功安装。

  npm install express -g   # 全局安装

国内直接使用 npm 的官方镜像非常慢.
可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

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

这样就可以使用 cnpm 命令来安装模块了：

  $ cnpm install [name]

.

Webpack安装

使用 cnpm 安装 webpack：

  cnpm install webpack -g

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

  cnpm install css-loader style-loader

.
.
.
.

vue-cli

安装:cnpm install vue-cli -g

node -V查看是否安装成功，注意V为大写。

出现了这个问题。。。
解决方法为：搜索vue.cmd的位置，如我的路径为：I:\npm\npm_global_modules，然后把这个文件的路径加入Path环境变量中。
环境变量在系统->高级系统设置->环境变量中可以设置。

.
然后再执行node -V：

安装成功！
.
.
使用：
vue init <template-name> <project-name>
template-name:模板名称。
project-name：项目名称。
如:vue init webpack helloworld
project-name你的项目名称，可以随意取名。模板名称，官方已经定义了几套模板，可直接使用。
可以用命令vue list来查看：

.
执行了之后

依次输入项目名称、项目描述、作者、是否安装路由、是否启用单元测试工具等等。
安装所有模块：

得到如下模板：

.
可以看到package.json中有"scripts"："dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js“,
npm run dev执行服务器函数，创建服务器。

浏览器会打开* localhost:8080 *

公共模板构建完成

.
.
.

vuex安装

npm install vuex --save

。。
之前下的版本太低，导致无法执行，需要更新node。
网上搜的为先安装 n 模块 sudo npm install -g n (在此之前清除 npm cache cache sudo npm cache clean -f )，
但无法执行，搜索之后了解到n命令在window下不支持。可以通过重新下载新版本的 msi 安装包，然后覆盖安装之前的版本来完成更新操作。
在覆盖的时候要检查之前安装 node 的路径，使用命令 where node 。

覆盖安装和前面讲到的第一次安装方法相同，只是安装路径选择为同之前一样的路径。
再去看 node 的版本：

而且安装 node 会同步更新 npm 的版本号。
.
node更新后再执行vuex安装:
npm install vuex --save

.
.
.
.
.
.
.
.
.

vue目录结构

components/文件夹用来存放Vue 组件。
Node_modules/npm安装的该项目的依赖库 。
vuex/文件夹存放的是和 Vuex store 相关的东西（state对象，actions，mutations) 。
router/文件夹存放的是跟vue-router相关的路由配置项 。
build/文件夹是 webpack 的打包编译配置文件 。
static/文件夹存放一些静态的、较少变动的image或者css文件 。
config/文件夹存放的是一些配置项，比如服务器访问的端口配置等 。
dist/该文件夹一开始是不存在，在项目经过 build 之后才会产出 。
App.vue根组件，所有的子组件都将在这里被引用 。
index.html整个项目的入口文件，将会引用根组件 App.vue 。
main.js入口文件的 js 逻辑，在webpack 打包之后将被注入到 index.html 中。
.

.
.
.

未完待续…