vue+mintui构建项目

VUE官方文档
MintUI官方文档
VUEX官方文档
axios官方文档

1. 安装node
2. 安装npm
#windows系统忽略 $符号
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack myapp(此处为项目名称)
# 进入项目文件夹
$ cd mypp
#安装依赖包
$ npm install
#此时还需要 sass依赖 以及MintUI、axios 
$ npm install sass sass-loader node-sass --save-dev
$ npm install mint-ui axios -S
# 启动项目
$ npm run dev
# 编译项目
$ npm run build
devserver配置
 
打开 myapp/config/index.js
// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')
module.exports = {
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    //是否生成.js.map文件
    productionSourceMap: false,
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    bundleAnalyzerReport: process.env.npm_config_report
  dev: {
    env: require('./dev.env'),
    //端口号
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    //配置代理服务解决开发环境中跨域问题
    proxyTable: {
        "/mock":{
                //实际url
                target:"http://localhost:9000/",
                /*changeOrigin接收一个布尔值，如果设置为true,那么本地会虚拟一个服务端接收你的请求并代你发送该请求，这样就不会有跨域问题了，当然这只适用于开发环境。*/
                changeOrigin:true,
                pathRewrite:{
                "^/mock":"/mock"
    cssSourceMap: false
axios配置
 
    npm i axios -S 安装本地依赖包
    myapp/src/scripts/utils/axios.js
import axios from 'axios'
export default {
  get: (param)=>{
    axios({
      url: param.url,
      method: param.method,
      data:param.data
    .then(function (res) {
      param.callback(res)
  post:(param)=>{
    axios({
      url: param.url,
      //请求方式
      method: param.method,
      //请求头
      headers:param.headers,
      // request body
      data:param.data
    .then(function (res) {
      param.callback(res)
axios使用
 
//引入文件
import utilAxios from '../../utils/axios'
//使用get方法
utilAxios.get({
    //url参数
	url: 'api/index/v1/m-banner',
	method: 'GET',
	//回调函数
	callback: function (res) {
		console.log(res)
VUEX 安装与使用
 
    npm install vuex --save
    myapp/src/scripts/vuex/store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
let store=new Vuex.Store({
    state:{
        user:false
    mutations:{
        change:(state,user)=>{
            state.user=user
export default store
import store from '../vuex/store.js'
//调用change方法
store.commit('change',true)
//获取user值
let user=store.state.user
MintUI使用(坑比较多后面持续更新)
 
//在 main.js中引入
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
<template lang="html">
      <mt-header title="Title"></mt-header>
  </div>
</template>
<script>
import Vue from 'vue'
import { Header } from 'mint-ui';
Vue.component(Header.name, Header);
export default {
</script>
vue-router
 
myapp/src/script/rputer/index.js
//引入依赖
import Vue from 'vue'
import Router from 'vue-router'
//引入页面
import Index from '../components/Index'
import About from '../components/about.vue'
import Home from '../components/home.vue'
import Dome from '../components/dome/lod.vue'
Vue.use(Router)
export default new Router({
  routes: [
      //根路由
      path: '/',
      name: 'index',
      component:Index,
      //设置默认路由
      redirect: '/home',
      //子路由
      children:[
          path:"/home",
          name:"home",
          component:Home
          //路由传参
          path:"/about/:id",
          name:"about",
          component:About
    },{
      path:"/list",
      name:"list",
      component:Dome
//router-link
//tag:默认为a标签属性 可以改为其他如 div li 等
<router-link to="/about/123" tag="div">我的</router-link>
//接收路由传参
console.log(this.$route.params.id)
Myapp

                    vue+mintui构建项目ps: - 帮助vue初学者如何使用cli快速构建项目用于生产环境。 - 配置vue项目所用依赖包。 - 如有问题请发邮件到 zzy1031839775@163.com传送门VUE官方文档 MintUI官方文档 VUEX官方文档 axios官方文档开始之前1. 安装node2. 安装npm构建项目#windows系统忽略 $符号# 全局安装 vue-cli...
				
在上篇文章给大家介绍了vue-cli webpack模板项目搭建及打包时路径问题的解决方法，可以点击查看。
vue-cli构建的项目中，生产模式下的打包路径、与生产模式下的请求代理简单示意
以上所述是小编给大家介绍的vue cli构建的项目中请求代理与项目打包问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！




    

.env.development：开发环境下的配置文件,执行npm run serve命令，会自动加载.env.development文件.
.env.production：生产环境下的配置文件,执行npm run build命令，会自动加载.env.production文件
属性名必须以VUE_APP_开头
比如VUE_APP_BASE_API_D
.env.development文件配置
ENV = 'development'
VUE_APP_BASE_API_D = 'h
				
详细解读webpack配置之mode
众所周知，webpack主要的作用就是将项目当中的各种文件(.html、.css、.js、.json、.vue、图片......)全部进行整合打包，所以需要很多的依赖和处理方法，那么它的配置也将会有很多很多的东西....下面，我就将一些比较常用的列举出来，它们的用法以及配置...
module.exports = {
   mode: '',
   en...
				
Vue项目构建doc是指通过一些工具和流程，将Vue项目构建成文档形式，方便开发人员和其他相关人员进行文档阅读和项目管理。在Vue项目中，文档构建至关重要，因为合理构建的文档可以提高团队开发效率和项目维护效率。
Vue项目构建doc需要用到一些工具，例如VuePress、ElementUI、Vetur等。其中，VuePress是一款基于Vue.js的静态网站生成器，可以快速构建Vue项目文档。ElementUI是一款Vue组件库，提供了一系列优雅美观的UI组件，方便我们在文档中添加演示和展示效果。而Vetur则是一款语法高亮插件，方便我们在编写Vue组件时更加清晰明了。
在进行Vue项目文档构建时，需要注意以下几个方面：
一、编写清晰的文档结构。在编写文档时，需要遵循一个清晰明了的结构，如首页、概述、安装、使用、API文档等。
二、代码演示。在编写组件时，需要提供多种不同的展示方式，包括静态图片、动态GIF图、在线DEMO等多种方式，以便于开发人员更好地理解和使用组件。
三、维护文档更新。在项目不断更新迭代的过程中，项目文档也需要不断地跟进更新，以保证文档的实用性和可信度。
总之，Vue项目构建doc是一个不可忽略的重要工作，它不仅可以提高整个团队工作效率，而且可以让客户更好地了解和使用项目。
In RequestException.php line 113:
  Client error: `GET http://cabinet.laravel.com/latest_lumen.zip` r
  esulted in a `404 Not Found` response:
  <!doctype html>
  <html lang="en">
      <head prefix="og: http://ogp.me/ns# cms: http://ogp.me/ns/cms
          <script>
    (truncated...)
[/code]
                nginx反向代理(前端 开发环境、测试环境、生产环境 解决方案)
                    你可以百度一下 vue history 模式 nignx 配置
                nginx反向代理(前端 开发环境、测试环境、生产环境 解决方案)
                    m0_37745105: 
                    你好，我有个疑问，开发环境你说因为路由有#，所以后面获取的js也有#，但是我发现没有，所以没法区分
                [搭建CLI效率工具] Rollup + TypeScript 搭建CLI工程
                    感谢，后面会整理到文章里面
                [搭建CLI效率工具] Rollup + TypeScript 搭建CLI工程
                    [处理rollup无法打包chalk@5的问题](https://github.com/chalk/chalk/issues/578)