创建Vue项目以及引入Iview的方法示例

2023-09-05 01:04:04 167

创建Vue项目以及引入Iview

官方文档

#全局安装vue-cli
$npminstall--globalvue-cli
#创建一个基于webpack模板的新项目
$vueinitwebpackmy-project
#安装依赖，走你
$cdmy-project
$npminstall
$npmrundev

以上是vue官方文档中Vue.js提供一个官方命令行工具创建vue项目的方法。

我创建Vue项目过程

$vueinitwebpackvue-iview

?Projectnamevue-iview
?ProjectdescriptionAVue.jsproject
?Authoryourname
?Vuebuildstandalone
?Installvue-router?Yes
?UseESLinttolintyourcode?Yes
?PickanESLintpresetStandard
?SetupunittestswithKarma+Mocha?Yes
?Setupe2etestswithNightwatch?Yes

vue-cli·Generated"vue-iview".

Togetstarted:

cdvue-iview
npminstall
npmrundev

Documentationcanbefoundathttps://vuejs-templates.github.io/webpack

$cdvue-iview/
$cnpminstall
$npmrundev

vueinitwebpackvue-iview时我使用默认的选项，直接回车；这里使用cnpm安装依赖

引入iview

src/main.js

//TheVuebuildversiontoloadwiththe`import`command
//(runtime-onlyorstandalone)hasbeensetinwebpack.base.confwithanalias.
importVuefrom'vue'
importAppfrom'./App'
importrouterfrom'./router'
importiViewfrom'iview'
import'iview/dist/styles/iview.css'//使用CSS

Vue.config.productionTip=false
Vue.use(iView)
/*eslint-disableno-new*/
newVue({
el:'#app',
router,
template:'',
components:{App}
})

在main.js中添加了

importiViewfrom'iview'
import'iview/dist/styles/iview.css'//使用CSS
Vue.use(iView)

以上3行代码

iview安装

$cnpminstall--saveiview

使用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的方法示例

热门推荐

随机推荐