准备工作:(以下工作都在cmd命令提示符窗口完成)
1. 搭建vue项目 首先安装node 因为要使用npm命令
怎样知道自己有没有 node.js 可以打开电脑的 cmd 命令提示符窗口,输入 node 就可以查看;
这是我已经安装过了,如果没有的话可以通过此链接根据自己的电脑配置下载安装:
2. 安装完之后我们就可以通过如下指令下载我们的 vue 脚手架了
npm install -g @vue/cli
如果觉得下载的慢的话 我们可以安装一下淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org ,安装完成之后直接输入如下指令就可以完成安装
cnpm install -g @vue/cli
安装完vue之后我们可以选择一个文件夹开始搭建你的项目(在项目文件夹中按住 shift + 鼠标右键,点击在此处打开powershell窗口)
以下操作都是在powershell窗口 中进行操作
1、vue create 项目名称 创建vue项目 项目名称不能使用中文
出现两个选项:
please pick a preset:(Use arrow keys) 请选择预设:(使用箭头键)
1、 default(babel, eslint)默认搭建项目的配置
2、 Manually select features 自定义搭建项目配置
我们选择 2.使用自定义搭建项目配置,使用键盘的上下键可以控制选择哪一个
选中自定义后点击enter
2、接下来出现很多配置选项
check the features needed for your project 配置项目所需要的功能:
我们现在只选择 babel和router
babel 是ES6转ES5的语言,为我们做兼容使用的;
router 就是我们的路由;
还是使用上下键选择 然后通过空格键切换是否选中 小括号中有星号表示选中
选中之后点击enter
3、这时会出现 User history mode for router?(Requires proper server setup for index fallback in production)
这句话的意思是:是否使用路由器的用户历史模式?(需要为生产中的索引回退设置正确的服务器)
这里如果公司项目没有说明要使用history则我们不使用history模式
所以这里选择no 然后点击enter
4、接下来出现
In dedicated config files 在专用配置文件中
In package. json 在json文件格式
这两个选项选择哪个都行
直接点击enter
5、这时出现 save this as a preset for future projects? 将此保存为将来项目的预设?
这里选择y/n 都行 直接按回车就可以了
等待片刻之后会出现
6、 cd project 打开project这个文件夹
npm run serve 项目启动命令
最后如果出现这个就表示项目搭建成功了
7、最后我们在我们的项目文件夹中按住 shift + 鼠标右键,点击在此处打开powershell窗口
输入npm run serve 项目启动命令就可以了
等待片刻会出现:
App running at: 应用程序运行位置:
- Local: http://localhost:8080/ 本地地址
- Network: http://192.168.1.10:8080/ 网络地址
我们直接在我们的浏览器中输入 其中任意一个打开 就表示运行成功了!