Vue-cli -1.介绍,引入并使用

Vue-cli就是Vue的开发者工具(脚手架工具)

首先先检查node及npm是否安装  用node -v 及 npm -v来检测版本号

①首先在全局cmd中安装 npm install -g @vue/cli    ,后使用vue --version来检测版本号是否正确,需4.5.以上的版本。

②如何创建项目: 使用npm create +项目名(名称内不能有中文及大写字母),如下图

后面选择Default Vue2,后面即可创建完成。创建完成后如下图

src文件夹

其中public是静态目录,src为代码目录(其中assets为静态资源目录,一般项目中的样式,字体,图标都放在assets中;components为组件存放的包;App.vue是全局组件;main.js是入口文件,main.js中的#app实例在public的index.html中),node_modules是项目依赖(包),babel.config.js是es6转es5的文件,package.json是包的描述文件。

render是渲染函数

如何运行网页:首先跳转到根目录,再  npm run serve 指令。

③components中每个文件就是一个组件,每个组件由三个部分组成;

xxx.vue是vue的单文件组件,template放置模板内容,script里面放置js代码,style里面放置样式代码。一般习惯组件的首字母大写。

使用其他组件的步骤:

1.导入组件   import Child from ' ./components/Child.vue '

2.注册组件  在components中注册如下图

3. 使用组件,在template的根元素div中使用,如下图

④ElementUI用法

1.安装  npm i element-ui -S

2.在main.js文件中导入ElementUI组件库 import ElementUI from ' element-ui '

3.导入ElementUI组件库的样式 import 'element-ui/lib/theme-chalk/index.css 

4.由于ElementUI组件库是插件,所以必须要use     Vue.use(ElementUI)

后续将第三方组件库中的代码及data数据引入componetns文件中

⑤ECharts

1.使用npm安装   npm install echarts --save

2.同理导入组件

3.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容