VUE-VSCode

根据本文档，你可以快速搭建VUE-VSCode 开发环境，包括安装必要的库，以及查看生成的项目文件目录

VUE+VSCode 开发

• a.安装VUE
  • 1.Node.js
    • 地址
      • https://nodejs.org/en/download/
    • 安装
      • cmd 管理员权限安装
    • 验证
      • 在cmd中node -v 检查确认是否安装成功
  • 2.淘宝npm 镜像
    • npm 在国外，比较慢
    • npm install -g cnpm --registry=https://registry.npm.taobao.org
  • 3.vue-cli脚手架
    • 安装
      • cnpm install --global vue-cli
    • 验证
      • 直接输入vue 查看版本
  • 4.新建项目
    • 开始
      • 命令
        • vue init webpack project_name
    • 注意事项
      • 是否要安装vue-route
        • Y
      • js语法检测
        • n
      • 后面一直选
        • n
  • 5.安装依赖
    • 进入项目文件夹
      • 安装依赖
        • 命令
          • cnpm install
  • 6.项目启动
    • 命令
      • cnpm run dev
    • 验证
      • 浏览器打开：http://localhost:8080/
• b.安装VSCODE
  • 地址
    • https://code.visualstudio.com/Download
• c.插件
  • Vetur
    • 语法高亮
  • eslint
    • 语法检测
  • prettier code formatter
    • 代码格式化
  • 修改插件配置
• 项目结构
  • 介绍
    • https://www.cnblogs.com/dragonir/p/8711761.html
  • README.md
    • 项目介绍
  • index.html
    • 入口页面
  • build
    • 构建脚本目录
    • build-server.js
      • 运行本地构建服务器，可以访问构建后的页面
    • build.js
      • 生产环境构建脚本
    • dev-client.js
      • 开发服务器热重载脚本，主要用来实现开发阶段的页面自动刷新
    • dev-server.js
      • 运行本地开发服务器
    • utils.js
      • 构建相关工具方法
    • webpack.base.conf.js
      • wabpack基础配置
    • webpack.dev.conf.js
      • wabpack开发环境配置
    • webpack.prod.conf.js
      • wabpack生产环境配置
  • config
    • 项目配置
    • dev.env.js
      • 开发环境变量
    • index.js
      • 项目配置文件
    • prod.env.js
      • 生产环境变量
    • test.env.js
      • 测试环境变量
  • mock
    • mock数据目录
    • hello.js
  • package.json
    • npm包配置文件，里面定义了项目的npm脚本，依赖包等信息
  • src
    • 源码目录
    • main.js
      • 入口js文件
    • app.vue
      • 根组件
    • components
      • 公共组件目录
      • title.vue
    • assets
      • 资源目录，这里的资源会被wabpack构建
      • images
        • logo.png
    • routes
      • 前端路由
      • index.js
    • store
      • 应用级数据（state）
      • index.js
    • views
      • 页面目录
      • hello.vue
      • notfound.vue
  • static
    • 纯静态资源，不会被wabpack构建
  • test
    • 测试文件目录（unit&e2e）
    • unit
      • 单元测试
      • index.js
        • 入口脚本
      • karma.conf.js
        • karma配置文件
      • specs
        • 单测case目录
        • Hello.spec.js