vue学习过程记录(2)-CSDN博客

本文链接：https://blog.csdn.net/qq_38274008/article/details/80923325

上图是基本vue项目的框架,我们操作的主要是index.html ,src,config,

在index.html中可以引入一些js,可以全局使用;src自己创建要显示的vue模板页面

在这里,我这个项目是将所有接口都放到api的js里,方便调用;assets下是项目的图片,样式,引入的外部js;components下是模板页面了,页面简单,但要实现单页面的跳转用到路由routerl例如这个,我想跳转到登陆就要在router下的js里import登陆这个vue页面.下图是我的登陆页面import后还要配置一下|

 
  export 
  default 
  new 
  Router({ 
 
  beforeRouteEnter 
  : ( 
  to, 
  from, 
  next) 
  => { 
 
  console. 
  log( 
  from); 
 
  next() 
 
   }, 
 
  meta: { 
  requiresAuth: 
  true }, 
  //　路由配置：是否需要登录的开关 
 
  routes: [ 
 
   { 
 
  path: 
  '/login', 
 
  name: 
  'login', 
 
  component: 
  login 
 
   }  
  还需要其他页面跳转,都要在这里import在配置一下才能实现

下面是config文件

里面的js主要是放域名接口,这是

indes.js里面代码:

 
  'use strict' 
 
  // Template version: 1.2.7 
 
  // see http://vuejs-templates.github.io/webpack for documentation. 
 
  const 
  path = 
  require( 
  'path') 
 
  module. 
  exports = { 
 
  dev: { 
 
  env: 
  require( 
  './dev.env'), 
 
  // Paths 
 
  assetsSubDirectory: 
  'static', 
 
  assetsPublicPath: 
  '/', 
 
  proxyTable: { 
 
  '/api' 
  : { 
 
  target: 
  'http://www.maishoutest.cn', 
  // 接口域名 
 
  changeOrigin: 
  true, 
  // 是否跨域 
 
  pathRewrite: { 
 
  '^/api' 
  : 
  '/' 
  // 需要rewrite重写的 
 
   } 
 
   } 
 
   }, 
 
  // Various Dev Server settings 
 
  host: 
  'localhost', 
  // can be overwritten by process.env.HOST 
 
  port: 
    
  8084 
  ,  
  //  
  注意端口号的占用问题 
  can be overwritten by process.env.PORT, if port is in use, a free one will be determined 
 
  autoOpenBrowser: 
  false, 
 
  errorOverlay: 
  true, 
 
  notifyOnErrors: 
  true, 
 
  poll: 
  false, 
  // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- 
 
  /** 
 
   * Source Maps 
 
   */ 
 
  // https://webpack.js.org/configuration/devtool/#development 
 
  devtool: 
  'eval-source-map', 
 
  // If you have problems debugging vue-files in devtools, 
 
  // set this to false - it *may* help 
 
  // https://vue-loader.vuejs.org/en/options.html#cachebusting 
 
  cacheBusting: 
  true, 
 
  // CSS Sourcemaps off by default because relative paths are "buggy" 
 
  // with this option, according to the CSS-Loader README 
 
  // (https://github.com/webpack/css-loader#sourcemaps) 
 
  // In our experience, they generally work as expected, 
 
  // just be aware of this issue when enabling this option. 
 
  cssSourceMap: 
  false, 
 
   }, 
 
  build: { 
 
  // Template for index.html 
 
  index: 
  path. 
  resolve( 
  __dirname, 
  '../dist/index.html'), 
 
  // Paths 
 
  assetsRoot: 
  path. 
  resolve( 
  __dirname, 
  '../dist'), 
 
  assetsSubDirectory: 
  'static', 
 
  assetsPublicPath: 
  './', 
 
  /** 
 
   * Source Maps 
 
   */ 
 
  productionSourceMap: 
  true, 
 
  // https://webpack.js.org/configuration/devtool/#production 
 
  devtool: 
  '#source-map', 
 
  // Gzip off by default as many popular static hosts such as 
 
  // Surge or Netlify already gzip all static assets for you. 
 
  // Before setting to `true`, make sure to: 
 
  // npm install --save-dev compression-webpack-plugin 
 
  productionGzip: 
  false, 
 
  productionGzipExtensions: [ 
  'js', 
  'css'], 
 
  // Run the build command with an extra argument to 
 
  // View the bundle analyzer report after build finishes: 
 
  // `npm run build --report` 
 
  // Set to `true` or `false` to always turn it on or off 
 
  bundleAnalyzerReport: 
  process. 
  env. 
  npm_config_report 
 
   } 
 
   }