搭建vue项目相关

1、安装node js
官网下载：https://nodejs.org/en/download/
安装完成后cmd，输入

node -v

npm -v

如果能看到node和npm的版本号了，说明已经安装成功


2、安装vue-cli
有npm和cnpm两种方式，网上都说cnpm好些，所以我也用的cnpm安装，

首先利用淘宝镜像安装cnpm

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


cnpm -v 

可以查看当前cnpm版本，这个和npm的版本还是不一样的
然后全局安装 vue-cli

cnpm install -g vue-cli

这个命令只需要运行一次就可以了。安装上之后，以后就不用安装了。

查看vue版本号

vue -V    //注：V是大写字母V

如果此时提示vue不是内部命令，则查看是否没有配置path，全局搜索vue.cmd，把他的目录加到path中即可

3、使用vue-cli来创建一个基于 webpack 模板的新项目
创建
cmd利用cd指令进入到保存项目的文件夹下，然后输入命令

$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install   //下载依赖包
$ npm run dev   //也可以npm start 启动项目

4、后续其它步骤—打包上线

自己的项目文件都需要放到 src 文件夹下

项目开发完成之后，可以输入 npm run build 来进行打包工作

npm run build
打包完成后，会生成 dist 文件夹，如果已经修改了文件路径，可以直接打开本地文件查看

项目上线时，只需要将 dist 文件夹放到服务器就行了。

项目结构

.
├── build/                      # webpack配置文件
│   └── ...
├── config/
│   ├── index.js                # 主要项目配置
│   └── ...
├── src/
│   ├── main.js                 # 应用入口文件
│   ├── App.vue                 # 主应用程序组件
│   ├── components/             # ui组件
│   │   └── ...
│   └── assets/                 # 模块资源（由webpack处理）
│       └── ...
├── static/                     # 纯静态资源（直接复制）
├── test/
│   └── unit/                   # 单元测试
│   │   ├── specs/              # 测试spec文件
│   │   ├── index.js            # 测试构建条目文件
│   │   └── karma.conf.js       # 测试跑步者配置文件
│   └── e2e/                    # e2e测试
│   │   ├── specs/              # 测试spec文件
│   │   ├── custom-assertions/  # e2e测试的自定义断言
│   │   ├── runner.js           # 测试跑步脚本
│   │   └── nightwatch.conf.js  # 测试跑步者配置文件
├── .babelrc                    # babel 配置
├── .postcssrc.js               # postcss 配置
├── .eslintrc.js                # eslint 配置
├── .editorconfig               # editor 配置
├── index.html                  # index.html模板
└── package.json                # 构建脚本和依赖关系