上篇是搭建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. JedisPool使用注意事项

    转自:http://www.cnblogs.com/wangxin37/p/6397783.html JedisPool使用注意事项: 1.每次从pool获取资源后,一定要try-finally释放, ...

  2. [Bzoj1030][JSOI2007]文本生成器(AC自动机&dp)

    题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=1030 最最最常见的多串匹配问题!题目求至少包含一个子串的方案数,则可以转化成全部方案-不 ...

  3. P2619 [国家集训队2]Tree I(最小生成树+二分)

    P2619 [国家集训队2]Tree I 每次二分一个$x$,每条白边加上$x$,跑最小生成树 统计一下满足条件的最小值就好了. to me:注意二分不要写挂 #include<iostream ...

  4. NGUI多行输入框和滚动条结合使用(text list script 和scroll bar script)

    一,我们添加一个label,如下图:将label属性设置 二,给label添加一个box collider.然后在add component 添加test list,如下图: 三,添加一个脚本Test ...

  5. 浏览器报406 错误:The resource identified by this request is only capable of generating responses with characteristics not acceptable according to the request "accept" headers

    The resource identified by this request is only capable of generating responses with characteristics ...

  6. linux内核启动过程

    作者:严哲璟 原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 通过qemu以 ...

  7. P与C

    P是排列:与次序有关,P(5.3)=5*4*3 C是组合:与次序无关,C(5.3)=(5*4*3)/(3*2*1)

  8. 【串线篇】Mybatis之模糊查询

    TeacherDao.xml sql语句:teacherName like #{name} 测试传值: teacher.setName(“%a%“):

  9. $NOIP2018$ 爆踩全场记

    NOIP2018 Day-1 路还很长. 这里就是起点. 这是最简单的一步,但这是最关键的一步. 联赛就在眼前了,一切好像都已经准备好了,一切好像又都没准备好. 相信自己吧,\(mona\),这绝对不 ...

  10. Codeforces Round #584 - Dasha Code Championship - Elimination Round (rated, open for everyone, Div. 1 + Div. 2)

    怎么老是垫底啊. 不高兴. 似乎 A 掉一道题总比别人慢一些. A. Paint the Numbers 贪心,从小到大枚举,如果没有被涂色,就新增一个颜色把自己和倍数都涂上. #include< ...