上篇是搭建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. maven基础--下载安装配置命令生命周期

    maven apache 公司开源项目,项目构建工具 好处: 项目小 坐标:公司名称+项目名称+版本信息 通过坐标去 仓库查找jar包 maven的两大核心: *赖管理:对jar包管理过程. 项目构建 ...

  2. php abs函数怎么用?

    php abs函数怎么用? abs()函数的作用是返回一个数的绝对值.语法是abs(number),如果参数 number 是 float,则返回的类型也是 float,否则返回 integer(因为 ...

  3. TP 验证码

    TP自带验证码类Verify.class.php 生成验证码 public function verify_c(){ session_start(); ob_clean(); $Verify = ne ...

  4. [eclipse相关] 001 - 启动+运行优化

    本随笔参考了其他博客内容,且在验证有效之下才或誊抄或摘录或加上自己经验组合而成. 参考博客: 1,http://zwd596257180.gitee.io/blog/2019/04/17/eclips ...

  5. spring中bean的构造函数,Autowired(Value)注入与@PostConstruct调用顺序

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/yyysylvia/article/deta ...

  6. Tomcat-部署多个项目(不同端口)

    20190713  整理 参考文档 https://blog.csdn.net/chenchunlin526/article/details/78799772 如何在Tomcat服务中,为不同端口部署 ...

  7. Sybase 修改数据库默认排序

    我新建了一个sybase数据库,想用dump文件load,可是报数据库的排序不对,就去Centrol里面修改,但是还是报错,说是字符集不存在.办法如下: 打开命令行,进入到sybase的ASE-15_ ...

  8. 前端学习(三十九)移动端app(笔记)

    移动端App    开发App的三种方式    Native App         原生        底层语言        java         Android        oc      ...

  9. java Arrays工具类的操作

    package java08; /* java.util.Arrays是一个与数组相关的工具类,里面提供了大量的静态方法,用来实现数组常见的操作 public static String toStri ...

  10. ltp-ddt nand_perf_ubifs_w_cpuload

    NAND_M_PERF_UBIFS_CPU_LOAD source 'common.sh';/opt/ltp/runltp -f ddt/nand_perf_ubifs -s "NAND_S ...