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來定義的。