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-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(二十)项目初始化步骤的更多相关文章
- 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,永久) ...
随机推荐
- 解决h5网页微信分享链接不能显示缩略
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js& ...
- python全栈开发day98-DRF
1.CBV源码流程 2.restful协议 1 所有的数据,不过是通过网络获取的还是操作(增删改查)的数据,都是资源,将一切数据视为资源是REST区别与其他架构风格的最本质属性 2 面向资源架构(RO ...
- net core体系-web应用程序-2项目简单案例
阅读目录 NO1 留言板(mysql的使用) NO2 聊天室(WebSocket的使用) NO3 找工作(AngleSharp的使用) 部署多个站点 一些其它的细节 部署阿里云 mysql的客户端 ...
- Codeforces 359E Neatness
Neatnes dfs一下用set维护能不能走, 进入的时候点亮灯, 回溯的时候灭灯. #include<bits/stdc++.h> #define LL long long #defi ...
- Linux CA证书与https讲解
1.什么是CA证书. ◇ 普通的介绍信 想必大伙儿都听说过介绍信的例子吧?假设 A 公司的张三先生要到 B 公司去拜访,但是 B 公司的所有人都不认识他,他咋办捏?常用的办法是带公司开的一张介绍信,在 ...
- web移动端浮层滚动阻止window窗体滚动JS/CSS处理
CSS代码: .noscroll, .noscroll body { overflow: hidden; } .noscroll body { position: relative; } JS代码: ...
- HDU4185 Oil Skimming 二分图匹配 匈牙利算法
原文链接http://www.cnblogs.com/zhouzhendong/p/8231146.html 题目传送门 - HDU4185 题意概括 每次恰好覆盖相邻的两个#,不能重复,求最大覆盖次 ...
- springmvc基础使用配置
前言 本案例是在idea编辑器下,maven管理项目的前提下. 步骤 1.新建maven项目 2.配置web.xml <?xml version="1.0" encoding ...
- 非root用户下实现SSH免密码登录
1.创建公钥.公钥 ssh-keygen -t rsa 无视它出来的任何提示,欢快的一路回车到底吧. 2.把公钥 id_rsa.pub 复制到远程机器的 /home/username/.ssh目录 并 ...
- Ubuntu Navicat 安装破解+解决乱码+其他问题
一 下载安装 Navicat Premium: https://www.navicat.com.cn/download/navicat-premium Navicat products: https: ...