vue2.0与vue3.0项目创建

脚手架安装与卸载

安装

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 // 静态资源目录（一般存放图片类）