vscode之vue-cli安装和vue项目搭建
1.确认已安装好node,中文官网如下,未安装可按需下载。下载好之后,打开文件直接一直下一步,根据需要更改安装位置即可:http://nodejs.cn/download/2.node安装好后,默认带有npm,查看安装是否成功①win+R 打开命令窗口②输入node -v查看版本③输入npm -v查看版本3.vscode中安装vue-cli①打开vscod...
1.确认已安装好node,中文官网如下,未安装可按需下载。下载好之后,打开文 件直接一直下一步,根据需要更改安装位置即可:
http://nodejs.cn/download/
2.node安装好后,默认带有npm,查看安装是否成功
①win+R 打开命令窗口
②输入node -v查看版本
③输入npm -v查看版本
3.vscode中安装vue-cli
①打开vscode终端,输入以下全局安装命令,然后回车,等待安装完成。
npm install -g @vue/cli
注,npm安装速度较慢,可通过npm先安装好cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
然后再安装vue-cli
cnpm install -g @vue/cli
②安装完成后,输入命令,显示已安装的vue-cli版本号即安装成功
vue --version
4.利用vue-cli工具搭建项目
工具已经安装好了,现在利用工具来搭建项目,让.vue文件能被浏览器所认识,所以接下来就是配置项目环境的步骤了
①选择要搭建项目的文件位置,按住shift并点击右键,选择:在此处打开命令窗口,进入命令窗口页面
输入创建项目命令(xxx为项目名称),回车
vue create xxx
创建命令执行后,页面如下,可上下键进行选择:
default 表示默认配置
Manually 表示手动选择配置
②选择Manually后(空格键表示选择),然后回车,页面如下
此处为选择项目所需的功能(可根据需要选择):
Babel 可使用es6/7
Router 路由
Vuex
CSS Pre-processors css处理器
Linter / Formatter 代码检查工具,将代码规范成统一的风格
③继续回车后,页面如下,此处默认选y(yes)
④继续回车,页面如下,默认选dart-sass
注意:此处选择node-sass很可能会在后面的下载过程中出现问题,此时只需要执行命令(cnpm i --save node-sass),因为node-sass会在npm的环境中下很可能安装不下来,但是使用cnpm可以安装成功
⑤选sass后,页面如下,选择标准的代码格式检查工具
⑥回车后进入下一步,Lint on save(保存后检查代码规范),Lint and fix on commit(自动修复代码格式功能)
⑦继续回车,到这一步,所有的配置信息都配置好了,将配置文件放在默认的独立文件里面(In package.json表示将配置文件放在package.json里面)
⑧继续回车,出现如下页面,表示询问你是否希望下次还继续使用以上的所有配置(可根据需要选择)
⑨继续回车,进入自动安装工具包的页面
出现如下页面表示安装完成
在vscode中打开创建好的文件
打开package.json,scripts脚本中为启动项目的方式
npm run serve -----启动项目的命令
(可在脚本中将serve改为start 启动项目时只需输入 npm start即可)
npm run lint -----自动修复代码格式
npm run build ------生产环境构建
vscode中选择创建好的文件----右击----在终端中打开----输入npm run serve,出现如下页面,说明默认启动了一台服务器,端口为8080
在浏览器打开,页面如下,就说明成功了
最后是个小彩蛋啦。。。
有的时候可能因为各种各样的原因安装不上vue-cli,而你又需要创建项目,这时候就可以选择这个快速的方法啦
①让已经安装好脚手架的人帮你创建好一个空项目,然后你自己新建一个文件夹,把别人创建好的项目中除了node_modules以外的其他文件都复制到你自己新建的文件夹中
②在新建的文件夹中shift+右击打开命令窗口,输入cnpm i,回车后就会把所有依赖的文件都下载一遍,然后你的项目就可以正常使用啦
更多推荐
所有评论(0)