使用 VueJS 全家桶做一个简单的 SPA 应用

zpns0669 3年前
   <p>最近 Vue 越来越火了, 知乎上到微博上, 越来越多的人在用它. 之前有学过一点 NG1 , 相比 NG1, VUE 的 API 十分简单.再通过使用 Vue 全家桶, 可以进行更高效的开发. 以下是本人使用 Vue 全家桶(VueJS + VueRouter + Vuex + Webpack) 撸出来 SPA 的一些过程. 使用的是 豆瓣的公共 API .</p>    <h2>安装 Webpack</h2>    <p>既然要用全家桶, 那么就需要先使用 Webpack, Webpack 是一个非常方便工具, 能根据配置文件自动地进行 JS 文件的打包.</p>    <p>首先我们需要安装 Node.js. 然后使用 NodeJS 里的 npm (NodeJSPackageManager) 进行包的安装和管理.</p>    <p>安装完毕之后, 打开 cmd , 在项目文件夹内运行 $ npm init , 之后会有一大串要你填的信息, 直接回车到底就行了.</p>    <p>完成之后, 这时项目文件夹中出现了一个 package.json 的文件.</p>    <p>做好了前期的准备工作, 我们现在开始正式安装 webpack , 在 命令行中输入 $ npm i webpack -g , -g 表示 webpack 将会是全局安装, 如果发现安装速度慢或甚至无法安装可以使用 cnpm 或者每次安装时都切换淘宝镜像, 在 -g 后添加 --registry=http://registry.npm.taobao.org , 下同.</p>    <p>等待安装结束, 我们可以开始写 webpack 的配置文件了. 在项目文件夹的根目录创建一个名叫 webpack.config.js 的文件.</p>    <p>然后我们再创建一些文件, 使文件结构像这样:</p>    <ul>     <li> <p>app</p>      <ul>       <li> <p>index.js</p> </li>      </ul> </li>     <li> <p>webpack.config.js</p> </li>     <li> <p>package.json</p> </li>     <li> <p>index.html</p> </li>    </ul>    <p>现在, 我们先开始配置 webpack 的入口文件和出口.</p>    <p>代码如下:</p>    <pre>  <code class="language-javascript">module.exports = {      entry: './app',      output: {          path: './build/,          filename: 'bundle.js'      }  };</code></pre>    <p>index.html:</p>    <pre>  <code class="language-javascript"><!doctype html>  <html>  <head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">  </head>  <body>  <script src="./build/bundle.js"></script>  </body>  </html></code></pre>    <p>接下来,</p>    <pre>  <code class="language-javascript">index.js:        var h2 = document.createElement('h2');  h2.innerHTMl = 'HELLO VUEJS';  document.body.appendChild(h2);</code></pre>    <p>直接在 cmd 中运行 webpack ,就能看到页面显示了一个h2标签,内容是 HELLO VUEJS.</p>    <h2>安装 Webpack-dev-server</h2>    <p>可以打包之后我们可以让 webpack 运行一个自己的服务器, 并且能在我们文件更新之后, 让其自动刷新</p>    <p>继续使用 cmd , 输入指令 npm i webpack-dev-server --save-dev . --save-dev 会讲安装后的包放在package.json 的devDependencies,一个放在dependencies里面, 产品模式用dependencies,开发模式用devDep.</p>    <p>安装完成之后, 继续往 webpack.config.js 中添加配置.</p>    <pre>  <code class="language-javascript">devServe: {      historyApiFallback: true,      hot: true,      inline: true,      progress: true  }</code></pre>    <p>再向 package.json 中 "script" 添加配置</p>    <pre>  <code class="language-javascript">"script": {      "start": "webpack-dev-server --hot --inline"  }</code></pre>    <p>.json 格式的文件里无论键名还是值都必须使用双引号.</p>    <p>写好之后在 cmd 中输入 npm run start 跑出一串字之后, 打开 localhost:8080 , 就能看到结果, 然后我们随意修改一下文本的内容保存一下, 会发现浏览器内的文字自动地刷新了. <strong>MAGIC</strong></p>    <h2>如何写 CSS</h2>    <p>现在能改动结构了, 但是有了结构就改想想 css 的问题了.</p>    <p>webpack 是把一个文件看作一个模块, 我们需要使用专门的 webpack loader 来处理各式文件.</p>    <p>处理 css 文件时, 我们需要 2个loader, 一个 style-loader 和 css-loader , 先来安装这两个 loader ,</p>    <p>输入 $ npm i css-loader style-loader --save-dev .</p>    <p>安装完毕后, 我们再来配置 webpack.config.js ,</p>    <pre>  <code class="language-javascript">module: {      loaders: [          {              test: /.css$/, //匹配到所有的css文件              loader: 'style!css', //有多种写法, 这是字符串式的写法, style-loader 等loader 可以省去loader 直接写 loader名,              loaders: ['style', 'css'], //数组写法, 注意要使用loaders!, loader 的执行顺序是从右到左, 也就是先用css-loader 再使用 style-loader          }      ]  }</code></pre>    <p>当然, 我们也可以使用 less sass stylus 等其他的 css 预处理器, 只需要在安装相应的loader, 这里我以 less-loader 为例, 因为 windows 的 SASS 会教你做人. 上一家公司 因为电脑没有安装 visual studio 而搞了几天....</p>    <p>安装 less-loader , 输入 $ npm i less-loader --save-dev , 等待安装结束后, 检查一下安装的依赖中是否有之前没安装过的, 要继续安装.(这个问题也许是之前我没有安装其他模块的依赖. less-loader 依赖 less ).</p>    <p>这里我们把刚才的 module.loaders 改一下</p>    <pre>  <code class="language-javascript">module: {      loaders: [          {              test: /.less$/, //匹配所有以 .less 结尾的所有文件              loader: 'style!css!less', //用 less-loader 来处理文件, 要先于 css-loader 处理之前处理 less              loaders: ['style', 'css', 'less'],          }      ]  }</code></pre>    <p>这样,我们也可以使用 less 了.</p>    <p>在 index.js 中以 AMD 方式引入 require('main.less'); . 这样就能愉快书写 less 了.</p>    <h2>如何使用 EcmaScript 2015</h2>    <p>ES6 已经是2016年之后的趋势了, VueJS 全家桶里的很多例子都是由 ES6 写成的. 是时候使用 EcmaScript 2015 了!</p>    <p>首先我们需要安装 babel-loader 以及 babel :</p>    <p>在命令行内输入</p>    <pre>  <code class="language-javascript">$ npm install --save-dev babel-preset-env</code></pre>    <p>安装babel, 以及</p>    <pre>  <code class="language-javascript">$ npm i --save-dev babel-loader</code></pre>    <p>安装babel-loader</p>    <p>安装之后更改 webpack.config.js 里的module.loaders</p>    <pre>  <code class="language-javascript">...,  {      test: /.js$/,      loader: 'babel-loader'  }</code></pre>    <p>babel 要求一个预制值, 可以在</p>    <pre>  <code class="language-javascript">...,  {      test: /.js$/,      loader: 'babel-loader',      query: {          presets: ['es2015']      }  }</code></pre>    <p>不过这样写, 在 .vue 文件中的 JS 将无法被处理.</p>    <p>这时 我们应该直接写到</p>    <pre>  <code class="language-javascript">module: ...,  babel: {      presets: ['es2015']  }    [1, 2, 3].forEach( (that) => console.log(that) );</code></pre>    <p>看看转换的结果吧</p>    <h2>安装 VueJS, 使用 vue-loader, 单文件组件</h2>    <p>搞了这么久, Vue 的 V 字都没开始写.</p>    <p>现在开始安装 Vuejs</p>    <pre>  <code class="language-javascript">$ npm i vue</code></pre>    <p>并且在 index.js 里引入 Vue</p>    <pre>  <code class="language-javascript">import Vue from 'vue';</code></pre>    <p>安装 vue-loader, 这样我们就能够使用 .vue 直接创建单文件组件了.</p>    <p>并且需要在 webpack.config.js 里加入</p>    <pre>  <code class="language-javascript">resolve: {      alias: {        'vue$': 'vue/dist/vue.js'      }  }</code></pre>    <h2>写起来吧!</h2>    <p>引入单文件组件:</p>    <pre>  <code class="language-javascript">import MainView from './components/Mainview.vue';</code></pre>    <p>如何直接用组件渲染到 el: #app 上?</p>    <p>使用</p>    <pre>  <code class="language-javascript">new Vue({      render (h) {          h(MainView); //将 MainView 渲染      }  }).$mount('#app'); //将渲染到 #app, 将会替换 #app</code></pre>    <p>使用 Vue-router</p>    <pre>  <code class="language-javascript">$ npm install vue-router`</code></pre>    <p>如果本身 应用页面很多的话, 可以将路由文件单独独立出来成一个文件.</p>    <p>首先在 router.js 引入</p>    <pre>  <code class="language-javascript">import Vue from 'vue';  import VueRouter from 'vue-router';    Vue.use(VueRouter);</code></pre>    <p>我们继续来定义路由:</p>    <pre>  <code class="language-javascript">const router = new VueRouter({      routes: [          {              path: '/',              component: HeaderVue //当只有一个Vue 没有其他命名路由时使用              components: { //当有其他命名路由时使用, 注意s!                  nameA: HeaderVue,                  nameB: HelloVue,                  default: ContentVue              }          }      ]  });</code></pre>    <p>最后我们将这个参数用 module.export = router; 传递到 index.js .</p>    <p>这里还有一个问题: 如果单独在一个页面里定义路由, 里面的 components 改如何写呢, 相对地址会不好写.</p>    <p>这里 node 提供了个函数 require(['./components/Content.vue'], resolve) 就能直接写了.</p>    <pre>  <code class="language-javascript">component: require(['./components/Content.vue'], resolve);</code></pre>    <p>使用 Vuex</p>    <pre>  <code class="language-javascript">$ npm i vuex</code></pre>    <p>Vuex 是 Vue 的状态管理工具.</p>    <pre>  <code class="language-javascript">import Vuex from 'vuex';    const store = new Vuex.Store({      state: ..., //状态      mutations: ..., //同步的改变状态, 请调用 mutation 来改变状态,而不是通过修改state      actions: ... //异步改变状态  });</code></pre>    <p>其他具体事项就看 API 好了. 学习难度比 NG1 低好多..[泪奔惹!]</p>    <p> </p>    <p>来自:https://segmentfault.com/a/1190000007852093</p>    <p> </p>