vue cli搭建项目及文件引入
cli搭建方法:需安装nodejs先
1、npm install -g cnpm --registry=https://registry.npm.taobao.org //安装cnpm,用cnpm下载东西有时会快一些
2、cnpm i -g vue-cli //安装 vue-cli,i:install 安装,-g:全局,哪儿都可以使用。
3、vue init webpack-simple ProjectName //webpack-simple:使用webpack-simple模板,projectName:项目名字,随意写,它会创建一个ProjectName的文件夹,作为根目录
4、cd ProjectName //打开新创建的文件夹
5、cnpm install //在跟目录中安装依赖。
6、npm run dev // 运行项目,
引入文件:
所有文件引入,都可以放在index.html中按常规方式引入。
引入 element-ui:
npm i element-ui -D 安装element-ui模块
cnpm i style-loader -D 配置style-loader 。这个在package.json中,新的文件没有配置,一定要安装loader。
import 'element-ui/lib/theme-default/index.css' 引入css
import ElementUi from 'element-ui' 引入ui模块
Vue.use(ElementUi) 使用引入ui模块。
webpack.config.js 到官网复制配置代码,放入webpack.config.js中。
引入stylus:
cnpm i stylus stylus-loader -D 安装stylus 模块和stylus-loader配置。
webpack.config.js中添加 { test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader' }
引入vuex:
cnpm i vuex -D 安装vuex
Vue.use(Vuex) 使用模块
export default new Vuex.Store({}) 一般store.js文件输出
引入animate.css
cnpm i animate.css --save 安装animate.css
import animate from 'animate.css 在vue文件中使用
import 引入
import aaa from './xxx.vue' vue文件引入后得到一个组件以及xxx.vue中export default的内容。如果vue文件中:export default{data(){return{t1:'1'}}},则能够用aaa.data().t1获取到1。
import aaa from ‘./xxx.js’ aaa得到js文件文件中export defualt的内容,还有一大堆原型方法。
vue cli搭建项目及文件引入的更多相关文章
- vue cli搭建项目
1.首先电脑要在安装node环境下才能运行 2.全局安装webpack:npm install webpack -g 3.安装vue脚手架: npm install vue-cli -g 4.新建文件 ...
- vue cli 打包项目造成css背景图路径错误
vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...
- 使用@vue/cli搭建vue项目开发环境
当前系统版本 mac OS 10.14.2 1.安装node.js开发环境 前端开发框架和环境都是需要 Node.js vue的运行是要依赖于node的npm的管理工具来实现 <mac OS ...
- 使用vue脚手架搭建项目并将px自动转化为rem
一.安装node.js环境 二.node.js安装完成后使用npm安装vue脚手架vue-cli和安装webpack,我这里用cnpm cnpm i @vue/cli -g //全局安装脚手架3.0 ...
- vue+ts搭建项目
Tip: 为了避免浪费您的时间,本文符合满足以下条件的同学借鉴参考 1.本文模版不适用于小型项目,两三个页面的也没必要用vue2.对typescript.vue全家桶能够掌握和运用 此次项目模版主要涉 ...
- Vue环境搭建-项目的创建-启动生命周期-组件的封装及应用
vue项目环境的搭建 """ node >>> python:node是用c++编写用来运行js代码的 npm(cnpm) >>> p ...
- 解决@vue/cli 创建项目是安装chromedriver时失败的问题
最近在使用新版vue的命令行工具创建项目时,安装chromedriver老是失败,导致后面的步骤也没有进行.网上搜索了一下,全是使用 工作中常见问题汇总及解决方案 npm install chrome ...
- Vue CLI 创建项目
使用命令创建VUE项目 运行以下命令[vue create [项目名]]来创建一个新项目: vue create hello-world 警告 如果你在 Windows 上通过 minTTY 使用 G ...
- VUE学习笔记之vue cli 构建项目
一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...
随机推荐
- 新版netkeeper开wifi无需路由器
谈一谈netkeeper的运行原理及如何不用路由器开启wifi.(针对重庆地区,其它地区没研究过.日期:2017.11.29) 旧版: netkeeper将用户名加密为真正的用户名进行登录,登录以后n ...
- 基于iTextSharp的PDF文档操作
公司是跨境电商,需要和各种物流打交道,需要把东西交给物流,让他们发到世界各地.其中需要物流公司提供一个运单号,来追踪货物到达哪里?! 最近在和DHL物流公司(应该是个大公司)对接,取运单号的方式是调用 ...
- js 匹配2个字符串相似度
strSimilarity2Number: function (s, t) { var n = s.length, m = t.length, d = []; var i, j, s_i, t_j, ...
- Web离线应用解决方案——ServiceWorker
什么是ServiceWorker 在介绍ServiceWorker之前,我们先来谈谈PWA.PWA (Progressive Web Apps) 是一种 Web App 新模型,并不是具体指某一种前沿 ...
- 使用Mybatis-Generator自己主动生成Dao、Model、Mapping相关文件
准备工作: 1.数据库驱动程序 2.generatorConfig驱动,(下载地址:https://github.com/mybatis/generator/releases) 3.generator ...
- ASP.NET Core 使用 Hangfire 定时任务
定时任务组件,除了 Hangfire 外,还有一个 Quarz.NET,不过 Hangfire .NET Core 支持的会更好些. ASP.NET Core 使用 Hangfire 很简单,首先,N ...
- NodeJs学习笔记(四)---单元测试
sailsjs框架用了一段时间了,感觉如果功能复杂了,非常难以处理,想用一下单元测试,看是否能解决问题. sailsjs的官方文档使用的是mocha,我搜索了一些资料,主要参考了朴灵 ...
- 中文颜色名称与RGB颜色对照表
中文颜色名称颜色对照表 鸨色 #f7acbc 赤白橡 #deab8a 油色 #817936 绀桔梗 #444693 踯躅色 #ef5b9c 肌色 #fedcbd 伽罗色 #7f7522 花色 #2b4 ...
- python安装和环境变量的配置
python安装和环境变量的配置 研究生阶段学习的需求,简单的学习了python的语法和基础之后产生了兴趣,有了想从基础把python学好用好的想法.因此在忙碌的学习中抽出时间,在每天花几个小时学习p ...
- iOS 单利模式实现/优缺点
感谢此文章提供摘要: http://www.cnblogs.com/lyanet/archive/2013/01/11/2856468.html 优缺点:http://blog.csdn.net/ta ...