创建Vue项目 以及引入Iview
“只有客户发展了，才有我们的生存与发展！”这是创新互联的服务宗旨！把网站当作互联网产品，产品思维更注重全局思维、需求分析和迭代思维，在网站建设中就是为了建设一个不仅审美在线，而且实用性极高的网站。创新互联对做网站、成都做网站、网站制作、网站开发、网页设计、网站优化、网络推广、探索永无止境。
官方文档
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev
以上是vue官方文档中Vue.js 提供一个 官方命令行工具 创建vue项目的方法。
我创建Vue项目过程
$ vue init webpack vue-iview
? Project name vue-iview
? Project description A Vue.js project
? Author yourname
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "vue-iview".
To get started:
cd vue-iview
npm install
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
$ cd vue-iview/
$ cnpm install
$ npm run dev
vue init webpack vue-iview 时我使用默认的选项，直接回车；这里使用cnpm 安装依赖
引入iview
src/main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import iView from 'iview'
import 'iview/dist/styles/iview.css' // 使用 CSS
Vue.config.productionTip = false
Vue.use(iView)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '',
components: { App }
})在main.js中添加了
import iView from 'iview'
import 'iview/dist/styles/iview.css' // 使用 CSS
Vue.use(iView)
以上3行代码
iview 安装
$ cnpm install --save iview
使用iview 组件
创建 src/components/LoginForm.vue
官方的组件代码缩进不符合要求，需要修改
src/App.vue:
补充：vue安装完iview后，启动项目，提示 in ./node_modules/dist/styles/iview.css 报错
打开 webpack.base.conf.js,找到 test:/.css$/,添加includ项即可
{
test:/\.css$/,
loader:'style-loader!css-loader!stylus-loader',
include:[
/src/,
'/node_modules/iview/dist/styles/iview.css'
]
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。
名称栏目：创建Vue项目以及引入Iview的方法示例
标题URL：
http://kswjz.com/article/ipgegd.html
