600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > npm方法创建一个vue项目 引入element插件

npm方法创建一个vue项目 引入element插件

时间:2024-04-12 20:17:03

相关推荐

npm方法创建一个vue项目 引入element插件

项目环境:

node -v:v8.11.1

npm -v: 5.6.0

cnpm -v:5.2.0

注意:Vue 不支持 IE8 及以下版本,在用 Vue 构建大型应用时推荐使用 NPM 安装。

在创建vue项目之前先用npm安装webpack:cnpm install webpack -g

第一步:npm方法安装vue

1.安装vue: cnpm install vue

2.全局安装vue-cli: cnpm install -g vue-cli

第二步:完成了第一步,以后每次就是用以下命令创建vue项目

1.创建一个基于 webpack 模板的新项目: vue init webpack project

2.安装依赖:如图:

vue.png

到此为止,一个vue项目就创建好了。是不是很简单,,不妨根据提示进入项目文件夹,测试一下,接着命令行继续执行最后两行:cd vue-project 然后npm run dev

执行成功后,会返回一个测试链接:http://localhost:8080,在浏览器中输入此链接,便可以看见以下网页:

vue-test.png

至此,表明你已经成功创建了一个vue项目,可以在项目文件夹中看见项目中所有的文件:

所有需要require的文件,没有./这个的话,都去node_modules文件夹里找@表示自定义的根目录1.build-[webpack配置]主要启动文件是webpack.dev.conf.js当我们输入npm run dev时候,首先启动的就是这个,它会去检查node和npm版本,加载配置,然后启动服务2.config-[vue项目配置]项目相关配置:主要是指定开发和打包中的静态资源路径、要压缩的文件类型、开发使用的端口号、开发使用虚拟服务器跨域请求 api 等。主要是index.js,当端口冲突时配置监听端口,打包输出路径及命名等3.node_modeles-[依赖包]项目依赖库,也可以自己按需要添加其它依赖:cmd。。 进入项目。。npm install 包名称4.src-[项目核心文件]assets:放置静态资源,包括公共的 css 文件、 js 文件、iconfont 字体文件、img 图片文件 以及其他资源类文件。之所以强调是公共的 css 文件,是因为要在组件的 css 标签里加入 ‘scoped‘ 标记,避免污染全局样式;components:放置通用模块组件。项目里总会有一些复用的组件,例如弹出框、发送手机验证码、图片上传等。main.js-[入口文件]:主要是引入vue框架,根据组件以及路由设置,并定义vue实例router文件夹下的index.js设置路由,用于绑定自定义的vue文件等5.static-[静态文件:图片,json数据]

第三步:引入一个好用的vue插件element-ui

1.安装element-ui,不是接着上面的命令继续敲,而是将项目拖到一个本地编辑器中,然后输入cnpm i element-ui -S

2.项目配置:在一个编辑器中打开刚创建的项目,在src文件夹下的main.js中填入

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

3.测试element-ui的插件是否起到作用了,用一个按钮测试,如上图中红色框框中添加的一句代码

注意事项:通过npm方法创建vue-cli的项目时,有两个需要注意的问题

一个组件下只能有一个并列的div

2.据要写在 return 里面

参考百度

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。