关于技术您现在的位置是:首页 > 关于技术
使用vue-cli3(vue脚手架)搭建vue项目
2020-11-27 11:34:53 【VUE】 195 人已围观 0 条评论
准备工作 : vue cli环境要求node版本8或者更高(8.10.0+推荐) vue cli3 需要node版本>=8.9, (官方推荐:8.11.0+ )
安装
准备工作 : vue cli环境要求node版本8或者更高(8.10.0+推荐) vue cli3 需要node版本>=8.9, (官方推荐:8.11.0+ )
1.安装node
中文官方网站:http://nodejs.cn/download/
2.全局安装过旧版本的 vue-cli(1.x 或 2.x)要先卸载它,否则跳过此步:
npm uninstall vue-cli -g //或者 yarn global remove vue-cli
3.安装@vue/cli(Vue CLI 3的包名称由 vue-cli 改成了 @vue/cli)
npm install -g @vue/cli //或者 yarn global add @vue/cli
注意:mac系统下,由于用户权限问题,安装@vue/cli时可用
sudo npm install -g @vue/cli
这个命令,当然需要输入用户密码
npm安装比较慢,等待完成之后,查看vue版本
vue -V //或者 vue --version
搭建新项目
1.找一个自己喜欢的文件夹存放项目
vue create <文件名> //例如 vue create demo
2.接下来就是选一些配置项(上下箭头选择,空格选中、取消,回车确定)
2.1选择预设配置(这里我们选择Manually select features)
Default 是默认配置,如果选择Default,一直回车执行下去就行了
Manually select features 是自己手动选择
2.2选择自己常用的配置(每个选项已做解释)
2.3选择vue版本(这里我们选择3.x)
2.4选择路由模式(这里我们选择使用hash模式)
Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由(通过调用浏览器提供的接口)
hash: 浏览器url址栏中的 # 符号(如:http://www.abc.com/#/hello,hash 的值为“ #/hello”),hash 不被包括在 HTTP 请求中(对后端完全没有影响),因此改变 hash 不会重新加载页面
history:利用了 HTML5 History Interface 中新增的 pushState( ) 和 replaceState( ) 方法(需要特定浏览器支持),单页客户端应用,history mode 需要后台配置支持(详细参见:https://router.vuejs.org/zh/guide/essentials/history-mode.html)
2.5选择CSS预处理器(这里我们选择Less)
CSS预处理器主要为CSS解决浏览器兼容、简化CSS代码 等问题
Less最终会通过编译处理输出CSS到浏览器,Less 既可以在客户端上运行,也可在服务端运行 (借助 Node.js)
2.6选择代码检测工具(这里我们选择ESLint + Prettier,最常用的)
提供一个插件化的javascript代码检测工具,可以检测出你代码中潜在的问题,保证写出的代码语法正确,风格统一
2.7选择何时检测语法(这里我们选择Lint on save)
Lint on save (保存时就检测)
Lint and fix on commit ( 用户提交文件到git的时候检测 )
2.8选择配置文件存放位置(这里我们选择In dedicated config files)
In dedicated config files(在专用配置文件中,就是单独管理)
In package.json(放在package.json里)
2.9是否保存本次配置为预置项(这里我们选择不保存)
如果你选择y那么下次搭建项目时就会出现你这一次配置的选项 ,就是上面第2.1条的选择项里面会有这项预置
回车确认之后就开始创建项目了
3.等全部下载完毕按照提示输入cd <项目名>进入你的项目,然后npm run serve就可以启动项目了
4.最后我们看下启动后的项目目录和项目界面
启动完成后会生成两个地址(一个本地,一个线上),随便哪个都可以在浏览器打开项目了
项目目录
项目界面
至此整个VUE项目就通过Vue Cli3搭建完成啦
相关推荐
文章评论

点击排行
友情推荐
- 微信公众号:扫描加关注