vue从零开始学习

vue从零开始学习_第1张图片

npm install慢解决方法:删掉nodel_modules。

5.0.3:表示安装指定的5.0.3版本
~5.0.3:表示安装5.0X中最新的版本
^5.0.3: 表示安装5.x.x中最新的版本。

yarn的优点:

1.速度快,可以并行安装
2.安装版本统一

vue从零开始学习_第2张图片

项目搭建:

  1. 安装nodejs
  2. 查看node版本:node -v
  3. 安装vue clie : npm install -g @vue/cli
  4. 查看vue版本:vue -V
  5. vue从零开始学习_第3张图片
  6. 使用vue ui 搭建项目:
  7. cd E:\work\gitee\vue-backend-1
    vue create vue-backend-1
    选择vue2 [等待即可]
    运行:npm run serve,浏览器可访问localhost:8080
    学习饿了么UI: Element - The world's most popular Vue UI framework
    项目安装饿了么UI依赖:npm i element-ui -S

    引用element-UI:main.js引入3行代码[全局引用]

    vue从零开始学习_第4张图片

    简单使用element-ui:拷贝代码到项目中,运行试试效果

    vue从零开始学习_第5张图片

    vue从零开始学习_第6张图片

    npm run server:

    按需引用:安装插件

    vue从零开始学习_第7张图片

    修改配置文件:

    vue从零开始学习_第8张图片

    vue 页面有el-row,el-button 组件:

    vue从零开始学习_第9张图片

    所以main按需引用就是把Row和button 引入

    vue从零开始学习_第10张图片

    配置文件第4行需要修改为:

    ["@babel/preset-env", { "modules": false }]
    

    vue从零开始学习_第11张图片

    项目启动:npm run server 发现效果等同于全局引用

    总结:按需引用的好处是使项目体积变小

    项目打包:npm run build, 打包后会多一个dist文件,项目发布也是发布的dist文件

    vue从零开始学习_第12张图片

    vue Router路由学习:Vue Router | Vue.js 的官方路由

    查看npm 里面的router 版本:router - npm search

你可能感兴趣的:(vue.js,学习,前端)