使用脚手架快速搭建Vue前端项目（脚手架2、脚手架4）

使用脚手架快速搭建前端项目（脚手架2、脚手架4）

一、脚手架2

第一步：通过命令：npm install vue-cli -g 安装脚手架

--------查看vue版本命令：vue -Version

vue -Version

第二步：通过vue init webpack test（项目名）来创建项目

如果提示vue不是命令，则查看vue环境变量配置，通过npm config list查看node配置列表

npm config list

第三步：通过命令：npm install 安装依赖

npm install

第四步：通过命令：npm run dev 启动项目

npm run dev

附加：引入Vue依赖部分

1、在vue项目中引入vuex（vuex：存储公共变量的地方）

—下载vuex：npm install vuex

npm install vuex

—在main.js中引入store和vuex，并且把store挂载在vue实例上

二、脚手架4

第一步、全局卸载电脑中脚手架2工具

npm uninstall vue-cli -g

拓展

清空缓存:

npm cache clean --force   

初始化:

npm install

第二步、全局安装脚手架4

npm install -g @vue/cli

或者

yarn global add @vue/cli

第三步、查看当前vue的版本

vue -V

第四步、通过脚手架4创建新的项目模版

vue create gshop_client

创建细节参考：参考地址

第五步、 此时电脑中不能再使用脚手架2的命令来下载项目啦,肿么办,安装桥接工具

npm install -g @vue/cli-init

第六步、此时电脑中脚手架2/4的命令都可以下载项目了

第七步、npm run serve 运行项目

npm run serve

三、脚手架2和脚手架4 的区别

(1)、 目录及文件个数不同
(2) 、脚手架4的 index.html 在public目录中
(3) 、项目能够在浏览器中自动的打开, 在package.json中后面加–open
“serve”: “vue-cli-service serve --open”
(4) 、main.js中的创建Vue实例对象中的代码不同
(5)、配置跨域不同
// 脚手架4中的代码

new Vue({
	render: h => h(App),
}).$mount('#app')

// 脚手架2的项目中的代码

new Vue({
	el:'#app',
	components:{App},
	template:'<App/>'
})