新建vue-cli项目（1）

npm install -g vue-cli

//注意vue项目名称不要有大写字母
vue init webpack vue项目名称

image.png

//项目建好后 通过你的编辑器打开项目,我用的是webstrom，打开Terminal输入如下命令

npm install

然后执行

npm run dev

如果不想输入npm的一些列命令，也可以找到package.json文件右键

image.png

会看到左边出现了

image.png

然后再编辑器右上角点击dev(停掉项目后再点击，不然会出现端口被占用的报错)

image.png

然后还有一个打包时静态资源报错的问题解决一下
再config/index.js下面把build的assetsPublicPath对应的value改成‘./’,

module.exports = {
 build: {
 ...
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
 ...
}
}

如果是为了方便调试可以把，config/index.js文件下dev的devtool的value改变一下

module.exports = {
dev: {
 ......
devtool: 'inline-source-map',
}
}

为了防止以后因为字体编码出现错误，main.js里建议加上编码格式（axios请求是需要自己安装的，这里就不赘述了，可以自己去安装一下）

import axios from 'axios'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

再次执行npm run dev ,可以再浏览器访问新建的项目了