vue.js创建网站实例1

  1. 搭建项目环境
    网上的教程很多,随便搜一个,参考:
    https://blog.csdn.net/weixin_43844158/article/details/89788002
    1)下载并安装node.js,访问 node.js中文官网,我下载的是12.18.4,ps:如果win10下安装失败,报2503/2502错误,可以使用cmd的管理员模式,进行安装
    2)安装淘宝镜像cnpm或yarn/bower(可选),node.js自带npm包管理器,它镜像的是国外的网站。 npm下载包一般比较慢,可以使用国内镜像(淘宝镜像cnpm)
npm install cnpm -g --registry=https://registry.npm.taobao.org

3)下载并安装git(可选)
4)安装vue脚手架vue-cli,用来搭建vue项目环境

cnpm i vue-cli -g
也可以指定安装版本
cnpm install -g vue-cli@2.9.6 --save

在这一步中,请耐心等待,最后要注意有没有error出现,如果有,重新执行一次上述命令,直到没有error出现位置
5)搭建项目环境,使用cmd进入项目文件夹,如:D:\vue,创建文件夹demo,运行下面的命令(若使用)

vue init webpack demo

vue.js创建网站实例1_第1张图片
最后一步选择第三项:i will handle myself
6)cmd中切换目录到demo

cd demo

7)安装插件

npm install
cnpm i vuex axios element-ui -D
或:
npm i vuex axios element-ui -S

或
npm install antd --save

vue.js创建网站实例1_第2张图片

8)启动项目

npm start
或:
npm run dev

vue.js创建网站实例1_第3张图片
若出现上述问题,删除demo文件夹下的所有内容,重复第5)步
若成功出现下图提示:
vue.js创建网站实例1_第4张图片

9)chrome中查看效果如下
vue.js创建网站实例1_第5张图片

  • vue.js创建网站实例1
  • vue.js创建网站实例2
  • vue.js创建网站实例3
  • vue.js创建网站实例4
  • vue.js创建网站实例5
  • vue.js创建网站实例6

你可能感兴趣的:(web前端)