一、首先确保已安装node
在终端中验证:
node -v
npm -v
二、安装vue脚手架工具
安装时可以指定版本号,默认安装的是5版本。
npm install -g @vue/cli
npm install -g @vue/cli@版本号
VUE CLI的包名称已经由vue-cli改成了@vue/cli。如果已经全局安装了旧版本的vue-cli(1.x或2.x),需要先通过npm uninstall vue-cli -g或 yarn global remove vue-cli 卸载它。
npm uninstall vue-cli -g
yarn global remove vue-cli
三、使用vue create创建vue项目
1.如果是创建老结构的项目,需要先安装vue桥接工具,然后使用vue init webpack命令来创建项目。
#vue桥接工具(创建老结构的项目需要安装vue桥接工具)
npm install -g @vue/cli-init
#创建项目
vue init webpack hello-world
2.如果创建新结构的项目,直接使用vue create命令就可以了。
vue create hello-world
3.以新结构项目为例:
(1)选择预设配置
- 默认的vue2配置:含有了babel和eslint。
- 默认的vue3配置:含有vue 3,babel,eslint。
- 手动选择。
(2)手动选择:空格键选择,a键全部选择,i键反向选择。
- Babel:es6 转 es5 。
- Router:路由 。
- Vuex:数据容器,存储共享数据 。
- CSS Pre-processors:CSS 预处理器,后面会提示你选择 less、sass、stylus等。
- Linter / Formatter:代码格式校验。
四、运行项目
这时项目初始化完成了。终端提示,接下来的操作如下,照做即可。
cd hello-world
npm run serve
浏览器输入:http://localhost:8080