vue-cli4.x零基础搭建模板

vue-cli4.x搭建

第一步：
官网下载并安装最新版node.js，他自带npm。我装在Ｆ盘。
安装完成后检查是否安装成功：
运行cmd，输入node --version，或者npm -V，按下Enter键。

如运行（window+R）cmd，显示“不是内部或外部命令”，则需要如下配置：
我的电脑－－>属性－－>高级系统设置－－>环境变量－－>系统变量
1、在图片处新建变量NODE_PATH，值为你安装nodejs的路径。在图片处新建变量NODE_PATH，值为你安装nodejs的路径。

2、找到path变量，尾部编辑添加%NODE_PATH%，最后确认、确认、确认及可。

3、重新启动运行cmd，输入node -v。这时就可以检查到版本号了。

第二步：
全局安装：运行npm install -g @vue/cli
也可以安装yarn：运行npm install -g yarn
npm* 换成yarn*就好了。
检查版本：vue -V（大写Ｖ哦）

第三步：
生成vue－cli模板组件：
1、输入vue create vuelearn 　 // " vuelearn "为您需要创建的文件夹名；　
　 下图下划线红标的是我的配置选项，可参考。

2、配完显示如下图，然后输入cd vuelearn，再输入npm run serve

3、打开如下路径网址中的一个

显示如下图，刚表示模板安装成功啦
如不是上图样子，则有可能是端口号冲突，按以下路径更改端口号及可

打开options.js，我们将注释去掉，把端口号改成8888，保存文件，运行npm run serve

也可以找到vue.config.js
module.exports = {
devServer: {
port: 8089, // 添加修改的端口号
proxy: ‘http://localhost:8080’
}
}
第四步：
输入 npm run build进行发布，然后输入dir，在项目中则生成dist文件夹。
发布文件就发布dist文件夹这个文件及可，此文件是经过压缩，源码加密的。