1，全局安装vue-cli
npm install -g @vue/cli //全局安装vue-cli
vue --version 或者 vue -V 查看版本2，创建项目
vue create vue-cli-demo
常用命令
"serve": "vue-cli-service serve", //启动一个开发环境服务器 热模块替换 类似于webpack-dev-server
"build": "vue-cli-service build",//根目录下创建dist目录，打包后的文件都在其中
"lint": "vue-cli-service lint",//使用ESlint进行检查并修复代码的规范
"inspect":"vue-cli-service inspect" //查看配置|-- node_modules: 存放下载依赖的文件夹
|-- public: 存放不会变动静态的文件，它与src/assets的区别在于，public目录中的文件不被webpack打包处理，会原
样拷贝到dist目录下
|-- index.html: 主页面文件
|-- favicon.ico: 在浏览器上显示的图标
|-- src: 源码文件夹
|-- assets: 存放组件中的静态资源
|-- components: 存放一些公共组件
|-- views: 存放所有的路由组件
|-- App.vue: 应用根主组件
|-- main.js: 应用入口 js
|-- .browserslistrc: 指定了项目可兼容的目标浏览器范围, 对应是package.json 的 browserslist选项
|-- .eslintrc.js: eslint相关配置
|-- .gitignore: git 版本管制忽略的配置
|-- babel.config.js: babel 的配置,即ES6语法编译配置
|-- package-lock.json: 用于记录当前状态下实际安装的各个包的具体来源和版本号等, 保证其他人在 npm install 项
目时大家的依赖能保证一致.
|-- package.json: 项目基本信息,包依赖配置信息等
|-- postcss.config.js: postcss一种对css编译的工具，类似babel对js的处理
|-- README.md: 项目描述说明的 readme 文件
3，自定义配置（配置vue.config.js）
//常用配置
module.exports = {
transpileDependencies: true,
devServer: {
port: 8888,//端口号，如果端口号占用，自动提升1
host: "localhost",//主机名
https: false,//协议
open: true,//启动服务时自动打开浏览器访问
},
lintOnSave: false,//关闭格式检查
productionSourceMap: false,//打包时不生成map文件
};4，配置代码模板片段
在vscode中依次选择 “ File（文件） -> preperences（首选项） -> User Snippets(用户代码片段)”， 此时，会弹出一个搜索框，输入 vue ， 选择vue.json
{
"Print to console": {
"prefix": "vue",
"body": [
"<template>",
" <div>",
" $0",
" </div>",
"</template>",
"",
"<script>",
"export default {",
" data () {",
" return {",
" }",
" },",
"",
" components: {},",
"",
" methods: {}",
"}",
"</script>",
"",
"<style scoped>",
"</style>"
],
"description": "Log output to console"
}
}5，更改项目标题，浏览器标题
找到public下的index.html 更改title即可
6，更改浏览器中显示的图标
找到public下的favicon.ico 删除，将新的图标重命名为这个即可
7，整合第三方库
安装axios
npm i -S axios安装 pubsub-js ，实现非父子组件间通信
pm i -S pubsub-js整合Element-ui
npm i -S element-ui
//引入element-ui
import Vue from "vue";
import ElementUI from 'element-ui'; // 组件库
import 'element-ui/lib/theme-chalk/index.css'; // 样式
import App from "./App.vue";
import router from "./router";
// 使用 ElementUI
Vue.use(ElementUI);
// 消息提示的环境配置，是否为生产环境：
// false 开发环境：Vue会提供很多警告来方便调试代码。
// true 生产环境：警告却没有用，反而会增加应用的体积
Vue.config.productionTip = process.env.NODE_ENV === 'production';
new Vue({
router,
render: h => h(App)
}).$mount("#app");npm run build后生成的页面引用错误404，在vue.config.js中增加配置
publicPath: './'