asp.net core前后端分離

陸陸續續的看了兩個禮拜的前端知識，把vue+vue-router+axios的知識擼了一遍，本來想加個element-ui來實現一下前后端分離，實施的時候卻遇到了很多的坑。我本身不在一個軟件開發公司上班，公司又有開發應用的需求。以前公司有錢的時候都是外包出去的，現在經濟不景氣，向我這種的“免費午餐”就有了用武之地。但是開發一些項目也只有我一個人在搞，從數據庫到前端再到后端服務器都是我一個人在搞。實在太幸苦。不為別的，能多掙點兒錢，給孩子用，就好了。先不說沒用的了，這篇文章主要是記錄一些前端的知識點，因為我暫時搞不下去了，先記錄一下，免得白學。

webpack

webpack是一個打包工具，它的作用卻超出了打包這個詞的范圍。使用vue-cli可以創建基於webpack的工程項目。webpack默認的配置文件名是webpack.comfig.js，內容如下：

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          // vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      },
      {
        test: /\.css$/,
        loader: "style-loader!css-loader"
      },
      {
        test: /\.(eot|woff|woff2|ttf)([\?]?.*)$/,
        loader: "file-loader"
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.common.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

還要注意的是element-ui按需加載的話需要配置babel的配置文件，.balbelrc：

{
  "presets": [["env", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

以上這兩個文件需要在vue init webpack xxxx生成工程后再進行修改。先記錄一下，以后有時間繼續搞。

Vue

vue是個好東西，用組件的思維對js的作用域進行了很好的封裝。vue里面比較重要的概念由兩個，一個就是組件，另一個就是路由，這兩個是做單頁面應用必須掌握的東西。當new一個Vue的時候，就是建立了一個根組件，可以在這個Vue的components屬性里面塞進去別的組件，Vue有一個單文件組件的概念，創建單文件組件可以更好的組織代碼。單文件組件是需要通過vue-loader來解析，后者又是基於webpack的生態的。子組件訪問父組件的數據（或者說父組件給子組件傳值）是利用props屬性，這個屬性是聲明在子組件里面的，用來接收父組件傳進來的值。相反方向上的話是利用子組件的$emit()來觸發事件，父組件來監聽這個事件，並接收事件本身傳遞來的值。當我們創建了很多組件，就涉及到如何在頁面上進行展現的問題了，這個是用vue-router來搞的，vue-router就是給每個組件起名字，然后用<router-link>和<router-view>來定向不同的組件。在根組件的router屬性上賦值的時候，可以在子組件中通過$route來進行訪問，如果是一個動態的路由的話（/user/:id),可以通過$route.params來訪問路由的參數值。和組件的概念類似的是，路由也可以有子路由，通過children來定義的。