脚手架安装与卸载
安装
npm install -g vue-cli
//or
npm install -g @vue/cli
卸载
npm uninstall -g vue-cli
//or
npm uninstall -g @vue/cli
桥接工具
npm install -g @vue/cli-init
vue项目创建
vue 2.0 项目创建
vue init webpack projectname
vue 3.0 项目创建
vue create projectname
运行项目
cd projectname //到指定文件目录
npm run serve //3.0项目运行
npm run dev //2.0项目运行
查看vue cli版本
vue -V
vue项目目录
vue3.0项目目录
.
├── 'node_modules' // npm下载包都在这个文件夹
├── 'public'
│ ├── 'favicon.ico'
│ └── 'index.html' // 作为入口模板,最后打包文件所在地，也是main,js 绑定的 dom
├── 'src' // 整个工程文件目录
│ ├── 'api' // 创建用来管理接口的文件夹
│ │ └── 'index.js' // axios 入口使用
│ ├── 'assets' // 静态资源管理负责管理图片文字一类的
│ │ ├── 'font' // 存放字体库文件夹
│ │ └── 'img' // 存放图片的文件夹
│ ├── 'components' // 存放组件文件夹
│ │ └── 'HelloWorld.vue' // 这是一个名叫HelloWorld.vue组件
│ ├── 'config' // 项目配置的文件夹
│ │ └── 'index.js' // 利用node 找包特性 起名index.js 可以快速导包
│ ├── 'directive' // 自定义指令文件夹
│ │ └── 'index.js' // 利用node 找包特性 起名index.js 可以快速导包
│ ├── 'lib' //工具包
│ │ ├── 'tools.js' // 存放和业务无关工具性质的js代码
│ │ └── 'util.js' //存放和业务相关工具性质的js代码
│ │ └── 'axios.js' //ajax 异步封装
│ ├── 'mock' // 模拟返回数据文件夹
│ │ └── 'index.js' // 利用node 找包特性 起名index.js 可以快速导包
│ ├── 'router' // 路由相关
│ │ ├── 'index.js' // 利用node 找包特性 起名index.js 可以快速导包
│ │ └── 'router.js' // 路由配置
│ ├── 'store' // Vuex状态管理文件夹
│ │ ├── 'plugin' // Vuex配置文件夹
│ │ │ └── 'saveInLocal.js' // vuex 文件内容本地化储存
│ │ ├── 'module' // 提取的特定模块的文件夹
│ │ │ └── 'user.js' // 保存user模块的vuex js
│ │ ├── 'actions.js' // 提取出vuex actions模块
│ │ ├── 'index.js' // 利用node 找包特性 起名index.js 可以快速导包
│ │ ├── 'mutations.js' // 提取出vuex mutations模块
│ │ ├── 'getters.js' // 提取出vuex getters模块
│ │ └── 'state.js' // 提取出vuex state模块
│ ├── 'views' // 视图组件 和 公共组件
│ │ ├── 'About.vue'
│ │ └── 'Home.vue'
│ ├── App.vue // 由于render 特性 所以需要一个被渲染的vue文件
│ ├── main.js // 项目入口，文件打包会找这个文件，并且将这个文件的内容打包
├── .browserslistrc //目标浏览器配置表
├── .editorconfig // 编辑器配置
├── .gitignore // 忽略用git提交省略的提交目录
├── babel.config.js // 高级语法转低级语法
├── package.json
├── package-lock.json // 锁版本包
├── postcss.config.js //CSS预处理器
├── README.md
└── vue.config.js // 项目自定义配置
vue2.0项目目录
├── 'README.md' // 项目说明文档
├── 'node_modules' // 依赖包目录
├── 'build' // webpack相关配置文件（都已配置好，一般无需再配置）
│ ├── 'build.js' //生成环境构建
│ ├── 'check-versions.js' //版本检查（node，npm）
│ ├── 'dev-client.js' //开发服务器热重载 （实现页面的自动刷新）
│ ├── 'dev-server.js' //构建本地服务器（npm run dev）
│ ├── 'utils.js' // 构建相关工具
│ ├── 'vue-loader.conf.js' //csss 加载器配置
│ ├── 'webpack.base.conf.js' //webpack基础配置
│ ├── 'webpack.dev.conf.js' // webpack开发环境配置
│ └── 'webpack.prod.conf.js' //webpack生产环境配置
├── 'config' // vue基本配置文件（可配置监听端口，打包输出等）
│ ├── 'dev.env.js' // 项目开发环境配置
│ ├── 'index.js' // 项目主要配置（包括监听端口、打包路径等）
│ └── 'prod.env.js' // 生产环境配置
├── 'index.html' // 项目入口文件
├── 'package-lock.json' // npm5 新增文件，优化性能
├── 'package.json' // 项目依赖包配置文件
├── 'src' // 项目核心文件（存放我们编写的源码文件）
│ ├── 'App.vue' // 根组件
│ ├── 'assets' // 静态资源（样式类文件、如css，less，和一些外部的js文件）
│ │ └── 'css' //样式
│ │ └── 'font' //字体
│ │ └── 'images' //图片
│ ├── 'components' // 组件目录
│ │ └── 'Hello.vue' // 测试组件
│ ├── 'main.js' // 入口js文件
│ └── 'router' // 路由配置文件夹
│ └── 'index.js' // 路由配置文件
└── static // 静态资源目录（一般存放图片类）