Vue(二十)项目初始化步骤
提:需要安装 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-devwebpack.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(二十)项目初始化步骤的更多相关文章
- vue项目初始化步骤
项目初始化:() 1. 安装vue-cli : npm install -g vue-cli 2.初始化项目: vue init webpack my-project 3.进入项目: c ...
- Vue + Element UI项目初始化
1.安装相关组件 1.1安装Node 检查本地是否安装node node -v 如果没有安装,从Node官网下载 1.2安装npm npm -v 如果没有安装:使用该指令安装: npm install ...
- 使用VUE框架搭建项目基本步骤
ps:初入Vue坑的小伙伴们,对于独立做一个项目可能不清楚需要使用哪些资源,这篇随笔希望对大家有所帮助. 第一步:参照vue的官方文档,建立一个vue的项目 # 全局安装 vue-cli $ npm ...
- Vue.js-创建Vue项目(Vue项目初始化)并不是用Webstrom创建,只是用Webstrom打开
我犯的错误:作为vue小白,并不知道还要单独去创建初始的vue项目,于是自己在webstrom中建了一个Empty Project, 在其中新增了一个js文件,就开始import Vue from “ ...
- vue前端项目初始化的步骤
前端项目初始化的步骤 1. 安装vue脚手架 2.通过vue脚手架创建项目 可以直接 vue create 项目名 也可以 vue ui 3.配置vue路由 4.配置Element-ui 组件 ...
- Vue+koa2开发一款全栈小程序(5.服务端环境搭建和项目初始化)
1.微信公众平台小程序关联腾讯云 腾讯云的开发环境是给免费的一个后台,但是只能够用于开发,如果用于生产是需要花钱的,我们先用开发环境吧 1.用小程序开发邮箱账号登录微信公众平台 2.[设置]→[开发者 ...
- 基于Vue的WebApp项目开发(二)
利用webpack解析和打包.vue组件页面 相关知识: vue项目中的每个页面其实都是一个.vue的文件,这种文件,Vue称之为组件页面,必须借助于webpack的vue-loader才能运行,所以 ...
- 前端Vue项目——初始化及导航栏
一.项目初始化 创建webpack模板项目如下所示: MacBook-Pro:PycharmProjects hqs$ vue init webpack luffy_project ? Project ...
- vue项目基本步骤
首先查看电脑是否已经安装vue并查看版本: window+R快捷打开命令行,cmd,输入node -v回车 如果未安装操作步骤如下: 1:$ cnpm install vue(新电脑安装Vue,永久) ...
随机推荐
- 2018项目UML设计-课堂实战
1. 团队信息 队名:小白吃队 成员: 卢泽明 031602328 蔡文斌 031602301 葛亮 031602617 刘浩 031602423 张扬 031602345 李泓 031602321 ...
- RequireJS跨域加载html模版后被转成JS问题分析及解决
问题描述 RequireJS跨域加载HTML模版失败,例如: 在a.com域名下请求CDN域名下的模版,text.js插件会把html文件转成html.js文件去加载,由于并没有生成html.js文件 ...
- zabbix实操随笔
vmware 9.0安装,vmware tools安装 fedora 15.0安装1G内存以上fedora上基本操作指令1.vmtools 共享文件在linux上安装有问题,出现找不到**.so.1之 ...
- jquery 计算两个日期相差的天数
<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title&g ...
- BZOJ3675 [Apio2014]序列分割 动态规划 斜率优化
原文链接http://www.cnblogs.com/zhouzhendong/p/8697258.html 题目传送门 - BZOJ3675 题意 对于一个非负整数序列,小H需要重复k次以下的步骤: ...
- 给定一个非负索引 k,其中 k ≤ 33,返回杨辉三角的第 k 行。
从第0行开始,输出第k行,传的参数为第几行,所以在方法中先将所传参数加1,然后将最后一行加入集合中返回. 代码如下: public static List<Integer> generat ...
- 039 在weblogic下部署jndi的多数据源
这个问题,在公司遇到了,一直没有学,今天学了一下. 后续,还要实验一下,暂时粘贴一下一个不错的url:https://www.cnblogs.com/xdp-gacl/p/4201094.html
- liunx命令简介
图形界面和命令行要达到的目的是一样的,都是让用户控制计算机.然而,真正能够控制计算机硬件(CPU.内存.显示器等)的只有操作系统内核(Kernel),图形界面和命令行只是架设在用户和内核之间的一座桥梁 ...
- FileZilla FTP Client
FileZilla Client是一个快速.实用.多功能和界面直观的免费的FTP客户端,虽然它是免费软件,可功能却一点也不含糊,比起那些共享软件来有过之而无不及,在新的版本中作者改进了手动下载的界面和 ...
- SORT--不要仅限于题目中
输入n,m 表示输入n个数输出前m个最大的数 Input The input file contains many test cases. Each case has 2 lines. The fir ...