vue-cli初始化

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: './'