开发vue订餐app。创建vue基础模板,icomoon制作素材并应用到项目中

创建vue基础模板


ctrl+r，运行cmd，输入cd /d d:可以看到已经进入d盘根目录
cd 项目工作空间根目录，比如我的就是 D:\A\vue_workplace 
进入后 npm install --global vue-cli  安装vue-cli
大约一分钟可以装完，vue init webpack 你的项目名字
接下来可以看到需要配置的内容，
? Project name sell 项目名字
? Project description sell app 描述你的项目
? Author chenhaoting 作者名字
? Vue build standalone
? Install vue-router? Yes 创建路由
? Use ESLint to lint your code? Yes 使用ESLint
? Pick an ESLint preset Standard 标准版
? Set up unit tests No 单元测试，我们这里不需要
? Setup e2e tests with Nightwatch? No e2e测试也不需要
视频教程没有告诉我们如何配置本地服务器端口，但是我们需要配置一下，

因为默认的端口会和tomcat端口冲突，所以我们进入 项目目录/config/index.js找到port：8080，改为port：8081

npm install vue

这时候可以cmd cd进入项目根目录，输入npm run dev，启用本地服务器，用浏览器查看vue提供基本模板


目录设计


在src下创建common文件夹，common里面创建fonts、js、stylus三个文件夹。
去icomoon制作素材，得到一个文件夹，里面有个fonts文件夹，把内容复制到项目的fonts中。
还有个style.css，复制到项目的stylus文件夹里，改名为icon.styl。
icon.styl文件中内容可以去掉{}和；
把模拟的后台数据data.json放进项目根中，进入webpack.dev.conf.js添加代码：
const appData = require('../data.json')
const seller = appData.seller
const goods = appData.goods
const ratings = appData.ratings
还要修改代码
devServer: {
    before(app) {
      app.get('/api/seller', function(req, res) {
        res.json({
          errno: 0,
          data: seller
        })
      });
      app.get('/api/goods', function(req, res) {
        res.json({
          errno: 0,
          data: goods
        })
      });
      app.get('/api/ratings', function(req, res) {
        res.json({
          errno: 0,
          data: ratings
        })
      });
    },
    clientLogLevel: 'warning',
    historyApiFallback: true,
    hot: true,
    host: process.env.HOST || config.dev.host,
    port: process.env.PORT || config.dev.port,
    open: config.dev.autoOpenBrowser,
    overlay: config.dev.errorOverlay ? {
      warnings: false,
      errors: true,
    } : false,
    publicPath: config.dev.assetsPublicPath,
    proxy: config.dev.proxyTable,
    quiet: true, // necessary for FriendlyErrorsPlugin
    watchOptions: {
      poll: config.dev.poll,
    }
  },