vue-cli

搭建环境 工欲善其事必先利其器，我们的学习计划从学会搭建Vue所需要的环境开始，node和npm的环境不用说是必须的，现在前端流程化很热门，基本上新的技术都会在这套流程的基础上做开发，我们只需要站在巨人的XX上装*就可以了。我假设你的机子上已经有了最新的node和npm了，那我们就只需要执行以下命令： $ npm install -g vue-cli 构建完了之后，随便进入一个我们事先准备好的目录，比如demo目录，然后在目录中做初始化操作： $ vue init webpack vue-cli-demo webpack 参数是指 vue-cli-demo 这个项目将会在开发和完成阶段帮你自动打包代码，比如将 js 文件统一合成一个文件，将 CSS 文件统一合并压缩等。 init (初始化)的过程中会问你给项目定义一些描述，版本之类的信息，可以不管，一直输入y确定跳过，完成之后出现以下界面，部分会提示你接下来要做的操作，按照它的提示继续敲代码就对了。 同时获取信息： npm i -S axios vue-axios cd vue-cli-demo npm install npm run dev npm install 是安装项目所需要的依赖，简单理解就是安装一些必要的插件，需要等一段时间； 同样也可以使用 yarn npm run dev 是开始执行我们的项目了

npm run build 打包结果如下： npm run prod-build 打包结果如下： 来源： https://www.cnblogs.com/cynthia-wuqian/p/12192723.html

1:同时跑两个服务配置： 1：cnpm i concurrently -D 2:在package.json中。 "scripts" : { "serve" : "vue-cli-service serve" , "build" : "vue-cli-service build" , "server" : "nodemon server.js" , "dev" : "concurrently \"npm run serve\" \"npm run server\" " } 2：跨域问题的配置 axios： 在vue.config.js中配置： module . exports = { devServer : { proxy : { // 跨域 协议 域名 端口 '/api' : { target : "http://localhost:8099/" , ws : true , changOrigin : true , pathRewrite : { '^/api' : '' } } } } } 来源： CSDN 作者： 奘倥城 链接： https://blog.csdn.net/weixin_45178761/article/details/103934526

"use strict" ; import Vue from 'vue' ; import axios from "axios" ; import VueAxios from 'vue-axios' // Full config: https://github.com/axios/axios#request-config // axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || ''; // axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; // axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; let config = { // baseURL: process.env.baseURL || process.env.apiUrl || "" // timeout: 60 * 1000, // Timeout // withCredentials: true, // Check cross-site Access-Control } ; const _axios = axios . create (

生产环境打包到子目录 module.exports = { // baseUrl: "", devServer: { host: "0.0.0.0", disableHostCheck: true }, publicPath: process.env.NODE_ENV === 'production' ? '/dist/' : '/', outputDir: 'dist', assetsDir: 'static' } nginx 配置子目录路径 location /dist/ { try_files $uri $uri/ index.html =404; error_page 404 /dist/; } 来源： https://www.cnblogs.com/fenle/p/12178690.html

1.webpack-chain 解析：应用一个链式API来生成和简化2-4版本的webpack的配置的修改。webpack-chain尝试通过提供可链式或顺流式的API创建和修改webpack配置。API的Key部分可以由用户指定的名称引用，这有助于跨项目修改配置方式的标准化。可通过npm方式进行安装：npm install --save-dev webpack-chain。 2.vue-cli-service命令 解析：在一个Vue CLI项目中，@vue/cli-service安装了一个名为vue-cli-service的命令。可以在npm scripts中以vue-cli-service、或者从终端中以./node_modules/.bin/vue-cli-service访问这个命令。使用默认preset的项目的package.json： { "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build" } } 3.vue-cli-service serve 解析：vue-cli-service serve命令会启动一个开发服务器[基于webpack-dev-server]并附带开箱即用的模块热重载[Hot-Module-Replacement]。除了通过命令行参数

一、Vue-cli安装 vue-cli是vue官方提供的脚手架工具，默认搭建好了一个项目的基本架子，我们在其基础上进行相应修改即可。 全局安装： npm install -g @vue/cli 　　 查看是否安装成功： 二、环境搭建 1、创建项目 npm create '项目名 ' 　　 2、手动选择配置选项 我们这里选择手动方式。 3、选择需要的依赖 ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> 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