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

      import Vuex from '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搭建项目及文件引入的更多相关文章

  1. vue cli搭建项目

    1.首先电脑要在安装node环境下才能运行 2.全局安装webpack:npm install webpack -g 3.安装vue脚手架: npm install vue-cli -g 4.新建文件 ...

  2. vue cli 打包项目造成css背景图路径错误

    vue cli做项目的时候难免会碰到,css引用背景图或者css,js之间的相互引用!!!这时候打包后可能会出现一个错误!!如下图: 写法: 错误: 会无端多出一个“/css/static/” 这样就 ...

  3. 使用@vue/cli搭建vue项目开发环境

    当前系统版本 mac OS 10.14.2 1.安装node.js开发环境 前端开发框架和环境都是需要 Node.js  vue的运行是要依赖于node的npm的管理工具来实现 <mac OS ...

  4. 使用vue脚手架搭建项目并将px自动转化为rem

    一.安装node.js环境 二.node.js安装完成后使用npm安装vue脚手架vue-cli和安装webpack,我这里用cnpm cnpm i @vue/cli -g //全局安装脚手架3.0 ...

  5. vue+ts搭建项目

    Tip: 为了避免浪费您的时间,本文符合满足以下条件的同学借鉴参考 1.本文模版不适用于小型项目,两三个页面的也没必要用vue2.对typescript.vue全家桶能够掌握和运用 此次项目模版主要涉 ...

  6. Vue环境搭建-项目的创建-启动生命周期-组件的封装及应用

    vue项目环境的搭建 """ node >>> python:node是用c++编写用来运行js代码的 npm(cnpm) >>> p ...

  7. 解决@vue/cli 创建项目是安装chromedriver时失败的问题

    最近在使用新版vue的命令行工具创建项目时,安装chromedriver老是失败,导致后面的步骤也没有进行.网上搜索了一下,全是使用 工作中常见问题汇总及解决方案 npm install chrome ...

  8. Vue CLI 创建项目

    使用命令创建VUE项目 运行以下命令[vue create [项目名]]来创建一个新项目: vue create hello-world 警告 如果你在 Windows 上通过 minTTY 使用 G ...

  9. VUE学习笔记之vue cli 构建项目

    一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...

随机推荐

  1. Java进阶(七)正确理解Thread Local的原理与适用场景

    原创文章,始自发作者个人博客,转载请务必将下面这段话置于文章开头处(保留超链接). 本文转发自技术世界,原文链接 http://www.jasongj.com/java/threadlocal/ Th ...

  2. Socket TCP Server一个端口可以有多少个长连接?受到什么影响?linux最大文件句柄数量总结

    Socket TCP Server一个端口可以有多少个长连接? 网上答案很多,不知道那个才是正确的 理论上是无限的 16.Linux中,一个端口能够接受tcp链接数量的理论上限是? A.1024 B. ...

  3. 用maven搭建java ee项目

    一.开发环境 jdk1.7  tomcat7 eclipse-jee-luna-R-win32 maven2.2.1 二搭建步骤 1.点击File->New->Other,选择maven ...

  4. CentOS安装java and javac(java执行环境和开发环境)

    [root@localhost usr]# yum install java Loaded plugins: fastestmirror, refresh-packagekit, security R ...

  5. hdu5304 Eastest Magical Day Seep Group&#39;s Summer 状压dp+生成树

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=5304 16个点的无向图,问能生成多少个n条边的连通图.(即多一条边的树) 先n^3 * 2^n 枚举全部的 ...

  6. Django的Models(三)

    ORM操作的一些进阶的方法: ################################################################## # PUBLIC METHODS T ...

  7. POST/有道翻译 有bug

    1.发现在翻译时地址没有变,那是POST请求. 2.通过fidder抓包工具抓取url 3.对data分析,发现每次salt和sign都在变化. 4.查看源码,先用站长工具http://tool.ch ...

  8. springboot+jpa+thymeleaf增删改查的示例(转)

    这篇文章介绍如何使用jpa和thymeleaf做一个增删改查的示例. 先和大家聊聊我为什么喜欢写这种脚手架的项目,在我学习一门新技术的时候,总是想快速的搭建起一个demo来试试它的效果,越简单越容易上 ...

  9. Android查缺补漏--ContentProvider的使用

    ContentProvider (内容提供者)是一种共享型组件,可以为系统内应用于与应用之间提供访问接口. ContentProvide要想正常工作需要三个关键点: ContentProvider:对 ...

  10. Python环境以及编辑器

    1.Python环境搭建 http://blog.csdn.net/qq_29663071/article/details/70158204 备注:a.个人感觉 安装路径为自己选择的 位置和特性 b. ...