您的位置:首页 > Web前端 > Vue.js

安装vue脚手架

2020-07-18 04:25 162 查看

安装nodejs

  • 下载地址:http://nodejs.cn/download/
  1. 测试nodejs 是否安装 ----在cmd中输入node -v
  2. 测试npm是否自动安装
  • npm -v

配置下载源—全局安装nrm

  • npm install nrm -g

使用taobao镜像源

  • nrm ls 查看镜像源
  • nrm use taobao

全局安装脚手架

npm i @vue/cli -g

测试安装是否成功

vue -V

创建VUE项目

vue create 项目名

项目配置

  1. 选择预设
    Please pick a preset: (Use arrow keys) ----使用键盘上下键选择 回车确定
    default (babel, eslint) ----默认只安装babel和eslint
    Manually select features ---- 自定义
  2. 手动选择插件(1,4,5,6)
  • Check the features needed for your project: ----空格选择,a全选,i反选 回车确定
  • Babel ---- 将高级版本ES转换为浏览器识别的JS语法
  • TypeScript---- JS的超集,提供了JS面向对象支持
  • Progressive Web App (PWA) Support ----渐进web app支持
  • Router ----路由、请求所对应的地址
  • Vuex ---- 数据状态管理器、用于多页面传参
  • CSS Pre-processors ----CSS预处理,将高级CSS语法转换为浏览器识别CSS语法
  • Linter / Formatter ----语法检测
  • Unit Testing ----单元测试
  • E2E Testing ----测试
  1. 选择路由模式
    Use history mode for router?
    History模式---- yes
    Hash模式---- no 路由的后方有#只刷新部分内容(建议采用)
  2. 选择CSS预处理
    Pick a CSS pre-processor
    Sass/SCSS (with dart-sass)
    Sass/SCSS (with node-sass)
    Less
    Stylus
  3. 选择插件的配置存放
    Where do you prefer placing config for Babel, ESLint, etc
    In dedicated config files ----独立的配置文件
    In package.json ----放在package.json中
  4. 是否保存预设
    Save this as a preset for future projects ----是否把你选择的作为预设
    N不保存
    Y保存

切换到项目文件夹—cd 项目名

运行—npm run serve

-输入地址: http://localhost:8080/
项目创建成功

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: