- 该部分分两个阶段:
老版本vue-cli脚手架搭建
-
一开始用的是老版本,就记录了一下
-
如果源没换,先换个源
npm config set registry https://registry.npm.taobao.org
-
先装webpack,笔者之前没接触过,所以从0开始装
npm install webpack webpack-cli -g
- 装的时候记得装上脚手架,当然如果忘记也会有提示你需要装脚手架,比如:
-
再全局装Vue-cli
npm install vue-cli --global vue-cli
-
查看版本号
- 这里注意下必须是
vue -V
,小写的是不行的
- 这里注意下必须是
-
初始化
-
vue init webpack project_name
-
如果一直卡在download template,试一试重装webpack,我是这么解决的。
-
接下来参考博客:https://www.cnblogs.com/ming1025/p/9887247.html
Project name (baoge): -----项目名称,直接回车,按照括号中默认名字(注意这里的名字不能有大写字母,如果有会报错Sorry, name can no longer contain capital letters),阮一峰老师博客为什么文件名要小写 ,可以参考一下。 Project description (A Vue.js project): ----项目描述,也可直接点击回车,使用默认名字 Author (): ----作者,输入你的大名 接下来会让用户选择: Runtime + Compiler: recommended for most users 运行加编译,既然已经说了推荐,就选它了 Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 仅运行时,已经有推荐了就选择第一个了 Install vue-router? (Y/n) 是否安装vue-router,这是官方的路由,大多数情况下都使用,这里就输入“y”后回车即可。 Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代码,ESLint是个代码风格管理工具,是用来统一代码风格的,一般项目中都会使用。 接下来也是选择题Pick an ESLint preset (Use arrow keys) 选择一个ESLint预设,编写vue项目时的代码风格,直接y回车 Setup unit tests with Karma + Mocha? (Y/n) 是否安装单元测试,我选择安装y回车 Setup e2e tests with Nightwatch(Y/n)? 是否安装e2e测试 ,我选择安装y回车
-
-
npm run dev 看看有没有创建成功
vue-cli 4.x脚手架搭建
- 装webpack,同上
- 然后是装vue/cli:
npm install -g @vue/cli
- 新建项目:
vue create project-name
- 由于新手,以下选了默认:
- 运行是否可以:
npm install
+npm run serve
(注意不是run dev,根据init的提示,npm install应该也可以不用,但是我为了保险起见还是加了上去) - 然后就是熟悉的画面,和老版一样的入口
补充——GUI创建
- 刚在官方文档发现的可视化创建方法,有点意思
- 选好地址打开cmd
vue ui
开启可视化 - 需要注意的是,这里显示开在800端口,应该是个显示错误,实际上是8000端口,然后界面还是很友好的,毕竟是个前端框架~