上篇是搭建Vue项目的基本,接下来是继续对做项目的记录。顺序并不一定。

五、对页面入口文件的修改:

  众所周知,main.js 程序入口文件,加载各种公共组件,App.Vue为 页面入口文件。但是有时候要想用自己的,那么很简单,在mian.js中:

  import App from './App'
修改为:
  import App from './ceshi'
 
在src中新建一个名为entries的文件夹,并新建ceshi.vue,并添加路由中。
 
  这个操作也就是将app.vue代替成了自己定义的文件。
 
六、项目布局封装:

  因为这个项目布局是独立封装了很多,包括布局样式。所以将页面中的公共布局样式进行了封装,封装方式是封装组件、路由引入添加需要的页面当中,哪个需要引入用哪个。

七、构建项目页面:

  编写页面代码,构建页面。

八、引入所需框架组件

  将所需的组件引入到项目当中,例如sass:

  npm install node-sass --save-dev

  npm install sass-loader --save-dev
推荐已使用淘宝镜像进行下载。
  在build文件夹下的webpack.base.config.js配置scss:
      {
test: /\.scss$/,
loaders: ["style", "css", "sass"]
},

九、设置axios

十、设置代理

时间紧凑,写不了详细,个人学习,如有分歧,很正常。第九第十详情,见下次。

vue搭建项目步骤(二)的更多相关文章

  1. Vue 搭建项目

    Vue  搭建项目 一.node下载安装: 1.下载:https://nodejs.org/en/download/ 2.安装默认许选择,下一步就行: 3.安装完之后就可以使用npm命令 二.通过@v ...

  2. vue搭建项目

    vue-cli 作用:快速搭建项目脚手架 安装3.0:npm i -g @vue/cli 安装桥接工具:npm i -g @vue/cli-init (vue-cli 3和旧版使用相同的命令,所以2被 ...

  3. 从无到有构建vue实战项目(二)

    二.vue项目的初步搭建 该项目我采用了当下最流行的vue ui框架---element-ui,首先用vue-cli构建一个vue项目: vue create education 然后会出现一系列配置 ...

  4. vue搭建项目前奏曲——vue-cli

    vue-cli是快速构建这个单页应用的脚手架,这个可是官方的.官方给的建议,如果你是初次尝试Vue,哪就老老实实用普通的书写引入js文件,这里牵扯太多的东西,例如webpack.Node.js.npm ...

  5. 使用vue搭建项目(创建手脚架)

    第一步:切换到创建的目录 创建项目 vue cerate [model] 第二步:切换到创建好的项目,然后创建element vue add element 第三步:创建router vue add ...

  6. vue创建项目步骤

    # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project ...

  7. vue搭建项目之设置axios

    首先要下载axios: npm install axios -S 要注意的是,axios不支持Vue.use();这种方式,可以改写原型链. 第二步就是新建axios存放位置: 在项目中src中单独建 ...

  8. vue构建项目步骤

    1.node版本请更新到6.9.X版本以上,不然npm依赖会出问题 2.命令行里运行npm install --global vue-cli 3.npm install --global webpac ...

  9. #单元测试#以karma+mocha+chai 为测试框架的Vue webpack项目(二)

    学习对vue组件进行单元测试,先参照官网编写组件和测试脚本. 1.简单的组件 组件无依赖,无props 对于无需导入任何依赖,也没有props的,直接编写测试案例即可. /src/testSrc/si ...

随机推荐

  1. IDF-CTF-牛刀小试 writeup

    题目链接:http://ctf.idf.cn/index.php?g=game&m=list&a=index&id=16 被改错的密码 从前有一个熊孩子入侵了一个网站的数据库, ...

  2. 基于vux的Vue路由切换动画

    const history = window.sessionStorage history.clear() let historyCount = history.getItem('count') * ...

  3. js 解决函数加载的问题

    var queue = function(funcs, scope) {         (function next() {               if(funcs.length > 0 ...

  4. CSS实现背景图片屏幕自适应

    在做登陆页面等的首页的时候,经常会遇到需要放一张背景大图的情况,并且需要图片按比例缩放,来适应不同屏幕的大小. html代码如下: <!DOCTYPE html> <html lan ...

  5. Python : Data Encapsulation

    Python : Data Encapsulation The following table shows the different behaviour: Name Notation Behavio ...

  6. CodeChef GCD2

    GCD2   Problem code: GCD2   Submit All Submissions   All submissions for this problem are available. ...

  7. zabbix 微信告警脚本

    #!/usr/bin/env python3 import requests import json import sys import os def access_token(Corpid,Secr ...

  8. 初识NuGet

    因为想查一查opencvsharp的东西,然后发觉这个包可以再NuGet上面可以直接下载.我也经常在很多地方都可以看到NuGet,所以我想写下来,记录下来. NuGet是一个免费的并且开源的包管理器在 ...

  9. axios 如何获取下载文件的进度条

    exportFun(){         let _that = this         const instance = this.axios.create({           onDownl ...

  10. vue动态设置Iview的多个Input组件自动获取焦点

    1.html,通过ref=replyBox设置焦点元素,以便后续获取 // 动态设定自动获取焦点按钮 <p class="text-right text-blue fts14 ptb1 ...