上篇是搭建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. html+css+js实现简单登陆注册页面

    先看一下最终效果,登陆和注册 背景图片: 附源码: login.html <!DOCTYPE html> <html lang="en"> <head ...

  2. python线程理论

    一.什么是线程 线程:顾名思义,就是一条流水线工作的过程,一条流水线必须属于一个车间,一个车间的工作过程是一个进程 所以,进程只是用来把资源集中到一起(进程只是一个资源单位,或者说资源集合),而线程才 ...

  3. [fw]拦截系统调用

    今天在ubuntu中玩了下“拦截系统调用”,记录下自己对整个实现的理解. 原理 在linux kernel中,系统调用都放在一个叫做“sys_call_table”的分配表里面,在进入一个系统调用的最 ...

  4. 浅谈Linux下的rpm

      虽然现在很多人都使用yum去替代rpm了,但是rpm在一些特殊场合下还是有其作用的,比如查询跟验证已安装的rpm包,rpm全称Redhat Package Manager,是一种用于互联网下载包的 ...

  5. ES6新增关键字let与var的区别

    最近看了很多文章,偶然间看到ES6中新增了一个关键字 let ,它具有与 var 关键字相似的功能.一开始使用它时,发现它让我对之前一些习以为常的东西产生了怀疑. 下面先让我们看看它和 var 之间用 ...

  6. Python Web开发:使用Django框架创建HolleWorld项目

    开发环境搭建 Python环境安装 下载地址:https://www.python.org/downloads// Django安装 打开Windows CMD输入pip install django ...

  7. 2019-9-2-win10-uwp-打电话

    title author date CreateTime categories win10 uwp 打电话 lindexi 2019-09-02 12:57:38 +0800 2018-2-13 17 ...

  8. Centos上Docker的安装及加速

    #环境 :内核的版本必须大于3.10 #安装docker yum install epel-release -y yum install docker-ce ##安装docker-ce #配置文件 d ...

  9. 202-基于TI DSP TMS320C6678、Xilinx K7 FPGA XC72K325T的高速数据处理核心板

    基于TI DSP TMS320C6678.Xilinx K7 FPGA XC72K325T的高速数据处理核心板 一.板卡概述 该DSP+FPGA高速信号采集处理板由我公司自主研发,包含一片TI DSP ...

  10. Class.forName的作用

    在java语言中,任何类只有被装载到JVM上才能运行.Class.forName()方法的作用就是把类加载到JVM中,它会返回一个与带有给定字符串明的类或者接口相关联的Class对象,并且JVM会加载 ...