项目初始化要求:

                  1)路由格式为history

                  2)CSS 预处理使用less

                  3)ui自动化测试使用NightWatch

                  4)语法规则和代码风格的检查工具使用eslint+airbnb

下面开始尝试用官方提供的脚手架创建示例项目。

Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。

环境 windows+nodejs+npm+yarn

1、安装脚手架 vue-cli 3.0

npm install -g @vue/cli
# OR
yarn global add @vue/cli

     查看脚手架版本

vue --version
3.0.1

2、用脚手架创建第一个Vue项目

1)通过 vue ui 命令以图形化界面创建和管理项目

D:\VueProject>vue ui

2)打开浏览器,输入http://localhost:8000,进入Vue项目管理器,选择创建,确认项目路径没有问题后,点击【在此创建项目】按钮

3)进入创建新项目页,选择详情。填写项目文件夹文本框,选择包管理器,这里选yarn。。。不选npm,主要是因为npm的的网络问题导致其需要更多的配置,当前版本的脚手架默认就是yarn。

 

4)切到预设,选择手动,以便我们按照项目要求进行灵活设置。

5)切到功能,打开Router、Vuex、Css Pre、Linter/Formatter这四个开关。

6)点击下一步,切到配置

Router:选择hisory模式

Css Pre:选择less

Linter/Formatter:选择ESLint+Airbnb

E2E Testing:选择NightWatch

至此,该项目的初始化要求已经设置完毕

7)点击【创建项目】按钮,弹出保存为新预设选项,填写预设名【ProjectStandard】,然后点击【保存预设并创建项目】按钮,保存生成可复用的 preset。我们后面的真实项目仍会复用该配置创建项目。

8)创建完成后,点击任务,进入serve页,点击【运行】按钮

 

9)切到输出,查看启动过程,启动成功后,提示App运行在8080端口

10)打开浏览器,输入地址,查看启动效果

如果创建过程中,提示安装chromedriver时连接 216.58.220.208:443超时,导致后面的步骤无法进行,最终安装失败。

解决办法:给yarn设置chromedriver源,设置成淘宝链接

yarn config set "chromedriver_cdnurl" "https://npm.taobao.org/mirrors/chromedriver"

npm安装的话同理 ,把yarn换成npm

 

----------------------------------------------------------------------------------------------------------------------------------------------------------------------

方案二:

cmd中运行以下命令来创建一个新项目:

vue create project-name

通过设置命令行中的选项初始化项目。

这种方式在Vue CLI 3官方网站有详细的步骤,这里就不再重复造轮子了。

地址:https://cli.vuejs.org/zh/guide/creating-a-project.html

 

 

Logo

前往低代码交流专区

更多推荐