安装vue-cli新版本并构建项目
安装vue-cli新版本并构建项目
一:卸载老版本安装新版本
1、查看版本:vue -V
2、卸载旧版本:npm uninstall vue-cli -g
3、安装新版本:npm install -g @vue/cli
4、安装Webpack命令:
本地安装(官方推荐本地安装):
npm install webpack --save-dev
npm install webpack-cli --save-dev
全局安装:
npm install -g webpack
npm install -g webpack-cli
webpack提供的插件,可以运行一个web服务,加载页面内容,并且修改js后不需要重新加载就能看到最新结果:
npm install webpack-dev-server --save-dev
5、安装yarn命令:
npm install -g yarn --registry=https://registry.npm.taobao.org
安装完后进行检查,yarn是否安装成功:
yarn --version
出现版本号,表示安装成功。
接着为了以后安装快速,可以配置淘宝镜像,执行以下两个命令:
yarn config set registry https://registry.npm.taobao.org -g
yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g
二:vue-cli4构建项目
1、选择路径,创建项目,例如在d:盘创建一个文件夹,进入文件夹。
2、新建项目:vue create new_app(new_app项目名称)
3、选择配置
4、进入项目文件夹:cd new_app
5、运行项目:npm run serve
6、进入地址
7、可以看到这个界面,项目搭建完成