vue搭建项目步骤(二)
上篇是搭建Vue项目的基本,接下来是继续对做项目的记录。顺序并不一定。
五、对页面入口文件的修改:
众所周知,main.js 程序入口文件,加载各种公共组件,App.Vue为 页面入口文件。但是有时候要想用自己的,那么很简单,在mian.js中:
因为这个项目布局是独立封装了很多,包括布局样式。所以将页面中的公共布局样式进行了封装,封装方式是封装组件、路由引入添加需要的页面当中,哪个需要引入用哪个。
七、构建项目页面:
编写页面代码,构建页面。
八、引入所需框架组件
将所需的组件引入到项目当中,例如sass:
npm install node-sass --save-dev
npm install sass-loader --save-dev {
test: /\.scss$/,
loaders: ["style", "css", "sass"]
},
九、设置axios
十、设置代理
时间紧凑,写不了详细,个人学习,如有分歧,很正常。第九第十详情,见下次。
vue搭建项目步骤(二)的更多相关文章
- Vue 搭建项目
Vue 搭建项目 一.node下载安装: 1.下载:https://nodejs.org/en/download/ 2.安装默认许选择,下一步就行: 3.安装完之后就可以使用npm命令 二.通过@v ...
- vue搭建项目
vue-cli 作用:快速搭建项目脚手架 安装3.0:npm i -g @vue/cli 安装桥接工具:npm i -g @vue/cli-init (vue-cli 3和旧版使用相同的命令,所以2被 ...
- 从无到有构建vue实战项目(二)
二.vue项目的初步搭建 该项目我采用了当下最流行的vue ui框架---element-ui,首先用vue-cli构建一个vue项目: vue create education 然后会出现一系列配置 ...
- vue搭建项目前奏曲——vue-cli
vue-cli是快速构建这个单页应用的脚手架,这个可是官方的.官方给的建议,如果你是初次尝试Vue,哪就老老实实用普通的书写引入js文件,这里牵扯太多的东西,例如webpack.Node.js.npm ...
- 使用vue搭建项目(创建手脚架)
第一步:切换到创建的目录 创建项目 vue cerate [model] 第二步:切换到创建好的项目,然后创建element vue add element 第三步:创建router vue add ...
- vue创建项目步骤
# 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project ...
- vue搭建项目之设置axios
首先要下载axios: npm install axios -S 要注意的是,axios不支持Vue.use();这种方式,可以改写原型链. 第二步就是新建axios存放位置: 在项目中src中单独建 ...
- vue构建项目步骤
1.node版本请更新到6.9.X版本以上,不然npm依赖会出问题 2.命令行里运行npm install --global vue-cli 3.npm install --global webpac ...
- #单元测试#以karma+mocha+chai 为测试框架的Vue webpack项目(二)
学习对vue组件进行单元测试,先参照官网编写组件和测试脚本. 1.简单的组件 组件无依赖,无props 对于无需导入任何依赖,也没有props的,直接编写测试案例即可. /src/testSrc/si ...
随机推荐
- IDF-CTF-牛刀小试 writeup
题目链接:http://ctf.idf.cn/index.php?g=game&m=list&a=index&id=16 被改错的密码 从前有一个熊孩子入侵了一个网站的数据库, ...
- 基于vux的Vue路由切换动画
const history = window.sessionStorage history.clear() let historyCount = history.getItem('count') * ...
- js 解决函数加载的问题
var queue = function(funcs, scope) { (function next() { if(funcs.length > 0 ...
- CSS实现背景图片屏幕自适应
在做登陆页面等的首页的时候,经常会遇到需要放一张背景大图的情况,并且需要图片按比例缩放,来适应不同屏幕的大小. html代码如下: <!DOCTYPE html> <html lan ...
- Python : Data Encapsulation
Python : Data Encapsulation The following table shows the different behaviour: Name Notation Behavio ...
- CodeChef GCD2
GCD2 Problem code: GCD2 Submit All Submissions All submissions for this problem are available. ...
- zabbix 微信告警脚本
#!/usr/bin/env python3 import requests import json import sys import os def access_token(Corpid,Secr ...
- 初识NuGet
因为想查一查opencvsharp的东西,然后发觉这个包可以再NuGet上面可以直接下载.我也经常在很多地方都可以看到NuGet,所以我想写下来,记录下来. NuGet是一个免费的并且开源的包管理器在 ...
- axios 如何获取下载文件的进度条
exportFun(){ let _that = this const instance = this.axios.create({ onDownl ...
- vue动态设置Iview的多个Input组件自动获取焦点
1.html,通过ref=replyBox设置焦点元素,以便后续获取 // 动态设定自动获取焦点按钮 <p class="text-right text-blue fts14 ptb1 ...