vue cli搭建项目及文件引入
Posted 吃个石头
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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‘ }
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-cli4 项目框架的搭建 以及 路由的封装axios的封装公共函数js文件的封装引用vuex的基本用法minins混入css以及字体图标和图片的引入等