1.确认已安装好node,中文官网如下,未安装可按需下载。下载好之后,打开文 件直接一直下一步,根据需要更改安装位置即可:
http://nodejs.cn/download/在这里插入图片描述
2.node安装好后,默认带有npm,查看安装是否成功
①win+R 打开命令窗口
②输入node -v查看版本
显示node版本号即安装成功
③输入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,回车后就会把所有依赖的文件都下载一遍,然后你的项目就可以正常使用啦

Logo

前往低代码交流专区

更多推荐