使用vue-cli3(vue脚手架)搭建vue项目

关于技术您现在的位置是:首页 > 关于技术

使用vue-cli3(vue脚手架)搭建vue项目

头像 2020-11-27 11:34:53 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搭建完成啦

相关推荐

文章评论


  • 0 条评论来说两句吧…  (* 为必填项,邮箱不会公开)

  •  *
  •  *
  • 提交评论

最停留-个人博客

友情推荐

  • 微信公众号:扫描加关注
  • 最停留-微信公众号