创建以及编译一个vue项目的步骤

发表于 | 分类于

下载配置npm

  1. 前往node.js官网下载并安装工具，这里安装路径选到D盘，D:\Program Files\nodejs

安装完毕在命令行输入以下命令测试是否安装成功，正确会出现版本号

1
npm -v

  1. 改变原有的环境变量

    (1) 我们要先配置npm的全局模块的存放路径以及cache的路径，例如我希望将以上两个文件夹放在NodeJS的主目录下，便在NodeJs下建立”node_global”及”node_cache”两个文件夹，输入以下命令改变npm配置

    1
    2
    npm config set prefix "D:\Program Files\nodejs\node_global"
    npm config set cache "D:\Program Files\nodejs\node_cache"

    (2) 在系统环境变量添加系统变量NODE_PATH，输入路径D:\Program Files\nodejs\node_global\node_modules，此后所安装的模块都会安装到改路径下

    (3) 在命令行输入以下命令试着安装express（注：“-g”这个参数意思是装到global目录下，也就是上面说设置的“D:\Program Files\nodejs\node_global”里面。）

    1
    npm install express -g

    安装完毕后可以看到.\node_global\node_modules\express 已经有内容

    (4) 在命令行输入node进入编辑模式，输入以下代码测试是否能正常加载模块：

    1
    require('express')

    假设成功，可以看到有输出。假设出错，检查NODE_PATH的路径。

安装淘宝npm（cnpm）

  1. 输入以下命令
1
npm install -g cnpm --registry=https://registry.npm.taobao.org
  1. 输入cnpm -v输入是否正常，这里肯定会出错。
1
cnpm -v
  1. 添加系统变量path的内容

因为cnpm会被安装到D:\Program Files\nodejs\node_global下，而系统变量path并未包含该路径。在系统变量path下添加该路径即可正常使用cnpm。

搭建Vue项目

  1. 全局安装 vue-cli
1
cnpm install –global vue-cli
  1. 创建一个基于 webpack 模板的新项目 
1
2
vue init webpack my-project
cd my-project
  1. 安装依赖
1
2
3
4
5
6
cnpm install jquery --save-dev
cnpm install jquery-weui --save-dev #移动端UI框架，依赖jquery
cnpm install axios --save-dev #异步请求
cnpm install fontawesome --save-dev #图标样式库
...

(mockjs(前后端分离，待研究)，iview,element-ui(web端框架))

  1. 项目目录规划
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
assets
	img
	js
	css
axios
	$http,js 封装get/post等http请求
components 公共组件目录
	...
pages 系统各模板页面
	...
router
	index.js 路由
app.vue
main.js 主入口文件
dist webpack 打包文件目录
  1. 项目运行和项目编译
1
2
cnpm run dev
cnpm run build