提:需要安装 node.js / npm淘宝镜像 / webpack / vue-cli脚手架构建工具

1.创建项目

- vue init webpack framework

  https://github.com/standard/standard/blob/master/docs/RULES-zhcn.md (ESLint规范)

2.切换到项目文件目录下,安装项目依赖

- cd framework

- cnpm install

3.启动项目

- npm run dev

4.添加css初始化文件

在 main.js中引入css文件

  

5.安装vuex

  - cnpm install vuex --save

  

  创建 store 目录 index.js 文件 ,在main.js文件中引入

  

6.安装ElementUI

  - cnpm install element-ui --save

  

  在main.js中引入

  

7.删掉自带组件 HelloWord.vue,创建自己的组件首页 Home.vue

  

  安装sass

  cnpm install node-sass --save-dev

  cnpm install sass-loader --save-dev

  webpack.base.config.js在loaders里面加上  module -- rules (vue2.0)

      {
        test: /\.scss$/,
        loaders: ["style", "css", "sass"]
      }

  修改路由文件

  

  启动项目

  

8.项目链接

  

  https://pan.baidu.com/s/1pNso7uN

  密码:tn15

  解压后安装项目依赖再启动

  - cnpm install

  - npm run dev

Vue(二十)项目初始化步骤的更多相关文章

  1. vue项目初始化步骤

    项目初始化:() 1. 安装vue-cli :    npm install -g vue-cli 2.初始化项目:   vue init webpack  my-project 3.进入项目:  c ...

  2. Vue + Element UI项目初始化

    1.安装相关组件 1.1安装Node 检查本地是否安装node node -v 如果没有安装,从Node官网下载 1.2安装npm npm -v 如果没有安装:使用该指令安装: npm install ...

  3. 使用VUE框架搭建项目基本步骤

    ps:初入Vue坑的小伙伴们,对于独立做一个项目可能不清楚需要使用哪些资源,这篇随笔希望对大家有所帮助. 第一步:参照vue的官方文档,建立一个vue的项目 # 全局安装 vue-cli $ npm ...

  4. Vue.js-创建Vue项目(Vue项目初始化)并不是用Webstrom创建,只是用Webstrom打开

    我犯的错误:作为vue小白,并不知道还要单独去创建初始的vue项目,于是自己在webstrom中建了一个Empty Project, 在其中新增了一个js文件,就开始import Vue from “ ...

  5. vue前端项目初始化的步骤

    前端项目初始化的步骤 1. 安装vue脚手架 2.通过vue脚手架创建项目 可以直接    vue create  项目名 也可以 vue ui 3.配置vue路由 4.配置Element-ui 组件 ...

  6. Vue+koa2开发一款全栈小程序(5.服务端环境搭建和项目初始化)

    1.微信公众平台小程序关联腾讯云 腾讯云的开发环境是给免费的一个后台,但是只能够用于开发,如果用于生产是需要花钱的,我们先用开发环境吧 1.用小程序开发邮箱账号登录微信公众平台 2.[设置]→[开发者 ...

  7. 基于Vue的WebApp项目开发(二)

    利用webpack解析和打包.vue组件页面 相关知识: vue项目中的每个页面其实都是一个.vue的文件,这种文件,Vue称之为组件页面,必须借助于webpack的vue-loader才能运行,所以 ...

  8. 前端Vue项目——初始化及导航栏

    一.项目初始化 创建webpack模板项目如下所示: MacBook-Pro:PycharmProjects hqs$ vue init webpack luffy_project ? Project ...

  9. vue项目基本步骤

    首先查看电脑是否已经安装vue并查看版本: window+R快捷打开命令行,cmd,输入node -v回车 如果未安装操作步骤如下: 1:$ cnpm install vue(新电脑安装Vue,永久) ...

随机推荐

  1. Codeforces Gym100187C Very Spacious Office 贪心 堆

    原文链接https://www.cnblogs.com/zhouzhendong/p/CF-Gym100187C.html 题目传送门 - CF-Gym100187C 题意 给定 $n$ 个房间以及 ...

  2. HDU2586How far away? LCA

    去博客园看该题解 题意 给出一棵树,以及每条边的权值,给出一些询问,每个询问是2个节点,求每个询问对应的2个节点的距离. 算法 LCA_Tarjan 代码 #include <cstring&g ...

  3. Effective前端2---加快页面打开速度

    1.避免head标签JS阻塞 所有放在head标签里的JS和CSS都会阻塞页面渲染.如果这些CSS和JS需要记在时间比较久,中间页面会存在一个空白期,严重影响到用户体验. 例如以下代码:在head标签 ...

  4. Jmeter实现Basic Auth方式登录

    背景 在实际测试日常中,产品有两种登录方式,一种是普通登录方式,另一种则是Basic Auth方式登录.两种登录对应着产品中不同的操作,对权限进行了一个划分. Postman登录 使用Postman登 ...

  5. mongo库的相关操作经验

    操作mongo相关经验: 1.创建数据库用户名: db.createUser( { user: "bianque", pwd: "123456", roles: ...

  6. 课堂练习&课下作业----用户场景分析

    典型用户1 ·小明---一名普通大学生生 名字 小明 性别.年龄 男,19岁 职业 大学生 收入 无 知识层次和能力 石家庄铁道大学学生,善于交际. 生活/工作情况 成绩优异,各方面技能突出 动机,目 ...

  7. 835.Hamming距离

    描述 两个整数的Hamming距离是对应比特位不同的个数. 给定两个整数x和y,计算两者的Hamming距离. 0 ≤ x, y < 2^31. 您在真实的面试中是否遇到过这个题? 样例 输入: ...

  8. 9. Fizz Buzz 问题

    Description Given number n. Print number from 1 to n. But: when number is divided by 3, print " ...

  9. word插入行

    如何在Word中添加多行或多列 在弹出的列表中选择[插入],再选择[在下方插入行]即可. 选择多少行就可添加多少行. 按F4重复上一操作可快速添加. 添加列也同样如此,选中一个单元格,右键单击,在弹出 ...

  10. Ue4管线中的灯光信息

    http://www.tomlooman.com/disneyfaciliershadow/ 看了这篇Blog我有了一个惊喜的发现: float4 GetPerPixelLightAttenuatio ...