Vue-cli3创建项目步骤

准备工作：vue-cli的版本需要3以上（我的是V 4.5.9），node环境
建议npm转为国内的地址

创建Vue项目

一、使用webpack来构建Vue项目，项目名vuedemo

vue init webpack vuedemo

根据自己的选择来配置

转到vuedemo文件夹

cd vuedemo

输入

npm install

运行构建好的项目

npm run dev

利用脚手架vue-cli来构建项目

cnpm i vue-cli -s

cnpm i vue -s

在项目文件夹下，打开命令行创建
第一步：
//test为你想要创建一个项目名

vue create test

会出现下面的选择
选择手动选择功能 Manually select features

? Please pick a preset:
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
> Manually select features

按下空格选中（根据自己的需求进行安排）

? Check the features needed for your project: (Press  to select,  to toggle all,  to invert selection)
>( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。 
( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行
( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
( ) Router // vue-router（vue路由）
( ) Vuex // vuex（vue的状态管理模式）
( ) CSS Pre-processors // CSS 预处理器（如：less、sass）
( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）
( ) Unit Testing // 单元测试（unit tests）
/ TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行
( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
( ) Router // vue-router（vue路由）
( ) Vuex // vuex（vue的状态管理模式）
( ) CSS Pre-processors // CSS 预处理器（如：less、sass）
( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）
( ) Unit Testing // 单元测试（unit tests）
( ) E2E Testing // e2e（end to end） 测试

后面操作会根据自己选择的不同，会有不同的配置需要你去配置

运行项目：

转到项目文件夹下，打开命令行
//启动方式可以参考你的package.json文件里面的信息,老版本好像是dev，可以改

npm run serve

使用图形化界面ui
在项目文件下，打开命令行输入

 vue ui

项目的打包与发布
打包

npm run build

一、发布到node
发布node搭建的http-server服务器上，全局安装http-server

npm install http-server -g

开启http-server

http-server

在本项目下打开终端，输入

http-server dist

会弹出分配的地址，点击进行访 问
二、发布到web服务器上

组件的开发
完整的组件格式

//scoped 给本文件限制作用域，就不和其它组件起冲突