vue的新建以及常见的问题

vue新建

1. npm install -g vue-cli 安装vue-cli脚手架构建工具

2. vue init webpack 项目名 创建vue

   除了vue-router选y其他选项默认，一直回车

3. 安装axios：
   npm install axios --save -dev
   main.js加：

   import axios from 'axios'，
   Vue.prototype.$http=axios
   

4. 安装elementUi
   npm i element-ui -S

   import ElementUI from 'element-ui';
   import 'element-ui/lib/theme-chalk/index.css';
   
   Vue.use(ElementUI);
   

5. 安装jq：
   npm install jquery --save
   main.js加：

   import $ from 'jquery'
   

   webpack.base.conf.js添加以下代码

   'jquery': path.resolve(__dirname, '../node_modules/jquery/src/jquery')
   

代理后端

在config 的index.js加

proxyTable: {
      "/": {
        target: "localhost:8080",
        changeOrigin: true,
        pathRewrite: {
            '^/': '/'
        }
    }

路由设置

1. 菜单

   在router的index.js

   {
         path: '/menu',
         name: 'Menu',
         component: Menu,
         children:[{
           path: '/ingredientsInformation/list',
           name: 'ingredientsInformation',
           component: ()=> import('@/view/ingredientsManagement/list')
         }]
       }
   

   在.vue页面中

   <el-menu :default-active="$route.path" background-color="rgb(51,58,76)" active-background-color="#fff" text-color="#fff" router style="height:690px;width:187.19px;" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
               <el-menu-item index="/ingredientsInformation/list" style="width:100%;text-align: center;font-size:15px">
                 <span slot="title">食材管理</span>
               </el-menu-item>
             </el-menu>
   

   .vue中的菜单index对应router的children的路径

vue打包

npm run build

或者是package.json里的调试的build

vue打包后element图标显示

在webpack.base.config.js中的url-loader中改成

name: 'fonts/[name].[hash:7].[ext]',
publicPath: '../fonts/',
outputPath: utils.assetsPath('fonts/')

vueApi拼接

在main.js

Vue.prototype.$apiUrl= '/api'