1 安装node和npm

去官网https://nodejs.org/en/即可，安装node自带npm。然后安装下镜像：

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

安装Vue-cli，这个最好去Vue官网找最新的安装命令：

cnpm install -g @vue/cli

如果用npm install -g vue-cli会安装旧版本。

2 创建项目

使用如下命令创建项目：

vue create my-project

如果之前装的就旧版本，就应该用如下命令：

vue init webpack my-project

大概区别是，vue create模板固定、可配置，而vue init一般就用推荐的webpack。所以需要先安装依赖：

cnpm install webpack

然后再初始化。本着用新的原则，这里推荐使用vue create，安装过程可以选择默认的Vue版本，也可以手动配置，如下图：

image.png
不过如果选择安装node-sass，大概率会出错，可以专门cnpm install -S node-sass，目前不知道区别以及为什么。安装结束后测试：

cd my-project
npm run serve

整个调用过程大概是index.html -> main.js -> App.vue -> ...。

3 安装Element UI

直接输入命令：

npm i element-ui -S

省事就全部在main.js引入算了。

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

然后就去官网拷贝代码测试并学习。

4 常见错误排查

node-sass还有sass-loader真的坑，一般是网络、版本问题。
如果出现：

Error: ENOENT: no such file or directory, uv_cwd

一般是重启终端。

5 发布部署

首先，打包项目：

npm run build

会生成一个dist文件夹，上传到服务器，比如放在/root/projects/dist。接下来安装Nginx，然后配置：

vim /usr/local/nginx/conf/nginx.conf

最简单就是这几个地方改一下：

user  root;
worker_processes  4; # 几核填几

listen       80;
server_name  localhost;
location / {
    root   /root/projects/dist/;
    try_files $uri $uri/ /index.html;
    # index  index.html index.htm;
}

然后基本就能访问了。

参考

这个文章值得看sf的/a/1190000022875865。