一、下载node.js
本人下载了v12.16.3版本的msi(省的自己配置环境变量了)
官网:https://nodejs.org/en/
安装后,可以用node -v
、npm -v
查看是否安装成功。
二、如果需要,可以设置修改下载源
//查看下载源
npm config get registry
//设置为淘宝源
npm config set registry https://registry.npm.taobao.org
三、如果需要,可以设置代理
//查看下载代理(默认是空的)
npm config get proxy
npm config get https_proxy
//删除下载代理(如果配置错了,可以删掉,因为默认是空的,所以删掉也没事)
npm config delete proxy
npm config delete https_proxy
//设置下载代理
npm config set proxy http://123.123.123.123/
npm config set https_proxy http://123.123.123.123/
四、全局安装vue-cli
//安装命令
npm install -g @vue/cli
//安装后,可以用这个查看版本,查看是否安装成功
vue --version
五、下载vue项目模板
进入到你想要创建项目的路径,执行:
vue create myvue
之后,可以选择下载vue2还是vue3的模板。
会在当前路径下创建myvue
文件夹,其中就是项目模板。
六、下载node_modules
进入myvue
文件夹,执行命令:
npm i
会把项目需要的相关node_modules
依赖,下载到node_modules
文件夹中。
七、启动项目
命令为:
npm run serve
执行后,如果没有问题,就可以启动项目,启动后的默认页面为:
http://localhost:8080/
八、项目打包
命令为:
npm run build
执行后,会在项目文件夹中生成一个dist
文件夹,其中就是打包好的前端项目;
前端发版时,一般是把dist
中的内容、放到nginx服务器
的指定文件夹
中。
(本地自己调试时会启动前端项目,npm run serve,不过测试或生产环境,一般不用启动前端项目,而是用nginx)