上篇是搭建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. mysql解析json字符串相关问题

    很多时候,我们需要在sql里面直接解析json字符串.这里针对mysql5.7版本的分水岭进行区分. 1.对于mysql5.7以上版本 使用mysql的内置函数JSON_EXTRACT(column, ...

  2. CentOS 安装开发工具包

    这里使用组安装包,一次性安装所有开发者工具. 1.查看有那些组安装包可用. [root@bogon ~]# yum grouplist | more 2.搜索一下有哪些和 Development 有关 ...

  3. jvm(4) 对象创建

    1.对象的创建过程: 1.new 类名 2.根据new的参数在常量池中定位一个类的符号的引用. 3.如果没找到这个符号的引用,说明类还没有被加载.则进行类的加载,解析和初始化 4.虚拟机为对象分配内存 ...

  4. java虚拟机笔记-1

    java虚拟机学习笔记 Java技术的核心就是Java虚拟机,因为所有的Java程序都在虚拟机上运行.Java程序的运行需要Java虚拟机.Java API和Java Class文件的配合.Java虚 ...

  5. deque(双向队列)基本用法

    deque(双向队列)基本用法 阅读体验:https://zybuluo.com/Junlier/note/1297030 简单介绍 就是可以两头插元素,两头删元素的数据结构 那么具体的STL操作(只 ...

  6. ReplaceAll 特殊字符处理

    用到Json与replaceAll Http拦截脚本中经常需要替换,replace虽然不需要处理特殊字符,但是不能匹配多个,ReplaceAll能够使用正则,不过需要处理的转移实在太多 比如,需要替换 ...

  7. 阿里云云监控agent插件 - Linux版

    阿里云云监控agent插件使用指南 1.安装(注意,要以“root”权限运行,复制 sudo后面的就行,别把#也复制进去) #64位 # sudo bash -c "wget -e 'htt ...

  8. Linux系统平台调优

  9. C语言字符串复制

    strcpy(arg1,arg2);//将arg2内容赋值到arg1 strncpy(arg1,arg2,size);//赋值多少由size决定,如果要截取某一部分,可以将arg2指针进行arg2+x ...

  10. html5 像素模拟渐变

    代码实例: <!DOCTYPE html> <html> <head> <style> canvas{ background:#eee; } </ ...