Vue脚手架创建项目流程

Vue脚手架创建项目流程

图形化创建

在创建文件的文件夹打开cmd，

按住shift右键打开黑窗口，或者直接在文件夹上面路径上面输入cmd

输入vue ui
会自己在浏览器打开

• 点击创建项目

项目文件夹名 ele_spa
包管理器 yarn或者npm(本人习惯yarn)
初始化git仓库新手建议关闭

• 下一步模板，手动
  choose vue version 打开
  babel 选中
  typescript 关闭
  pwa 关闭
  router 打开
  vuex 打开
  css 打开
  linter 建议关闭
  unit 建议关闭
  choose a… 选择2版本
  router mode 关闭（本人使用的是哈希模式路由）
  pick css node-scss

启动命令 命令在package.js里面
开发 npm run serve
生产 npm run build

命令行创建

• vue2.0创建项目命令行vue init webpack my-app ,vue2引入scss-loader时试用7以下版本
  vue3.0命令vue create ele_spa //后面是文件名
  选择预设选择最后一个 自己选 select

• 空格选择 a全选 i反选

• 下面是需要选中的

• choose vue

• babel

• router

• vuex

• css

• 空格
  选择版本

• 空格
  n

• 空格
  node-css

• 空格
  config

• 空格
  n

生成的文件夹

• public 公共文件夹
• src 开发代码
• brow 兼容性
• package 文件信息 serve 开发 build生产

vscod 安装vetur插件

– 项目入口main.js
分别导入了vue app router store
Vue.config.productionTip=false 开发模式true为生产模式