WEB前端开发-Vue框架

2021-12-15

一、Vue

官网： https://v3.cn.vuejs.org/

 

二、下载安装Vue

2.1 首先是安装了nodejs。

参考我的博客：https://www.cnblogs.com/zhangchao0515/p/15693503.html

2.2 安装vue

参考官网：https://v3.cn.vuejs.org/guide/installation.html

安装 vue-cli

npm install vue-cli -g
  或者 
cnpm install --gloabal vue-cli
  或者 
yarn global add @vue/cli

 

2.3 测试

vue -V

如果安装了 vue-cli

vue-cli -V

 

三、新建vue框架项目

参考官网：https://v3.cn.vuejs.org/guide/installation.html

vue init webpack vuedemo

 

四、安装第三方包

可以通过 npm、cnpm、yarn

例如，下载element-ui依赖

cnpm i element-ui -S

 

五、测试vue框架项目是否搭建成功

5.1 打开cmd控制台
5.2 打开项目所在位置的文件夹
5.3 运行

cnpm start

或者

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

 5.4 点击访问网址

根据代码提示，在浏览器输入相应网址， 我的例子是 http://localhost:8081, 显示

 

 表示项目构建成功！

 

参考：

NPM安装Vue及配置

搭建vue框架并使用element-ui: https://blog.csdn.net/weixin_46591962/article/details/109145467

vue引入第三方库： https://www.cnblogs.com/sxz2008/p/8245282.html

    https://www.jb51.net/article/157189.htm