vue-cli脚手架搭建项目整理笔记

笔记是整理之前开发外卖APP的整个设计框架和搭建基础以及如何修改配置方面。老实说第一遍写的时候脑袋装不下，第一次开发时自己手写了些笔记，但是当时恨不得把整个全写下来，可是内容太多了，就写了些关键的地方。写完后自己整个又搭建了一遍，对mock数据和配置修改熟悉了些，时间久了又忘了一些，并且现在又没有vue的项目了就想记录一下，隔断时间看下也不至于以后接手项目又重头找资料搭建。

一、全局安装vue-cli、webpack

使用的webpack模板，新建项目vue init webpack myapp，等待安装会出现一些提示选择回车直到安装完毕

二、目录

static是一个空目录，保存第三方静态资源的，gitkeep文件作用当static为空时也能将该目录提交到git仓库，正常情况该空目录是无法提交到仓库的。

package.json中的devDependencies表示开发编译时的依赖

后面是一些语法的配置文件相关，比如bable是吧ES6转成ES5的，eslintgnore是忽略部分js文件检查，eslintrc.js中的rules可以修改规则检查；

npm run dev实际是运行的package.json中指示的文件webpack.dev.conf.js（见下面代码），该文件中有运行时的基础配置文件webpack.base.conf；

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

webpack.dev.conf.js中的相关配置如下：plugns部分（热加载）

new webpack.HotModuleReplacementPlugin(),热加载插件
new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
  filename: 'index.html',后面生成的文件
  template: 'index.html',为模板中的index
  inject: true      css、js文件路径插入到新生成的html中
}),

webpack.base.conf中的相关配置如下：入口文件js，输出路径，简写设置（蓝色部分引入文件自动补全后缀名；红色部分，引入组件时常写的路径太长可以设置简写符号，下面的是默认符号）

entry: {
  app: './src/main.js'
},

output: {
  path: config.build.assetsRoot,此为config文件夹下index.js中build部分

resolve: {
  extensions: ['.js', '.vue', '.json'],
  alias: {
    'vue$': 'vue/dist/vue.esm.js',
    '@': resolve('src'),
  }

在需求分析和项目资源准备好后导入resource文件;

SVG文件矢量文件（不会因为放大图片改变其质量不会变化），转换成图标字体（通过网址https://icomoon.io/）,下载解压后只需要font字体和style.css

在src下新建common目录，增加font（放入图标字体）stylus（放入style.css修改为icon.styl并修改格式去掉多余分号和括号）、js

三、模拟数据

“./”表示当前路径

script中引入文件的路径默认是写相对路径，script通过export default{}导出对象

请求静态资源两种方式，最后都是通过/api/seller访问资源

第一种直接通过路由方法

const data=require('../data');
const seller=data.seller;
const express = require('express');
const app = express();
然后在devServer中添加

before(app){
  app.get('/api/seller', function(req, res) {
    res.send({
      error:0,
      data:seller
    });
  })
}
第二种Router 实例

const data=require('../data');
const seller=data.seller;
const express = require('express');
const approuter=express.Router();

before(app){
  approuter.get('/seller', function(req, res) {
    res.json({
      error:0,
      data:seller
    });
  });

app.use('/api',approuter);
}

四、

五、

vue-cli脚手架搭建项目整理笔记

猜你喜欢