• vue零基础学习--搭建项目


    一、script引入(练习使用,小型项目)

    直接下载并用 <script> 标签引入,Vue 会被注册为一个全局变量。

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

    二、Vue 提供一个官方命令行工具

    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目。

    1.cli是建立在node的环境下,首先检查是否安装node,可以直接到中文官网http://nodejs.cn/下载安装包。安装完之后检查安装的是否成功,输入命令行检查、

    显示了安装版本号,则表示安装成功,注意版本号不要过低。

    2.直接全局安装 vue-cli:命令行

    npm install --g vue-cli

    但是这种安装方式比较慢,推荐使用国内镜像来安装,所以我们先设置 cnpm:

    npm install -g cnpm --registry=https://registry.npm.taobao.org

    如果安装失败,可以使用 npm cache clean 清理缓存,然后再重新安装。后面的安装过程中,如有安装失败的情况,也需要先清理缓存

    同样可以使用 cnpm -v 查看是否安装成功

    然后使用 cnpm 安装 vue-cli 和 webpack

    cnpm install -g vue-cli
    

    最新的 vue 项目模板中,都带有 webpack 插件,所以这里可以不安装 webpack

    安装完成后,可以使用 vue -V (注意 V 大写)查看是否安装成功。

     

    如果提示“无法识别 'vue' ” ,有可能是 npm 版本过低,可以使用 npm install -g npm 来更新版本

    3.搭建我们自己的项目

    首先到我们需要建项目的文件夹 ,摁住shift键点击鼠标右键,选择在此处打开命令窗口,创建一个基于 webpack 模板的新项目

    vue init webpack test-Project

    安装结束后,根据提示启动项目,以前安装完后会在安装依赖,现在是在安装的时候就将依赖下载了,不需要单独安装。

    成功后的文件结构为:

    .
    |-- build                            // 项目构建(webpack)相关代码
    |   |-- build.js                     // 生产环境构建代码
    |   |-- check-version.js             // 检查node、npm等版本
    |   |-- dev-client.js                // 热重载相关
    |   |-- dev-server.js                // 构建本地服务器
    |   |-- utils.js                     // 构建工具相关
    |   |-- webpack.base.conf.js         // webpack基础配置
    |   |-- webpack.dev.conf.js          // webpack开发环境配置
    |   |-- webpack.prod.conf.js         // webpack生产环境配置
    |-- config                           // 项目开发环境配置
    |   |-- dev.env.js                   // 开发环境变量
    |   |-- index.js                     // 项目一些配置变量
    |   |-- prod.env.js                  // 生产环境变量
    |   |-- test.env.js                  // 测试环境变量
    |-- src                              // 源码目录
    |   |-- components                     // vue公共组件
    |   |-- store                          // vuex的状态管理
    |   |-- App.vue                        // 页面入口文件
    |   |-- main.js                        // 程序入口文件,加载各种公共组件
    |-- static                           // 静态文件,比如一些图片,json数据等
    |   |-- data                           // 群聊分析得到的数据用于数据可视化
    |-- .babelrc                         // ES6语法编译配置
    |-- .editorconfig                    // 定义代码格式
    |-- .gitignore                       // git上传需要忽略的文件格式
    |-- README.md                        // 项目说明
    |-- favicon.ico
    |-- index.html                       // 入口页面
    |-- package.json                     // 项目基本信息
    .

    config里面有很多配置文件,我们可以根据项目改动,如更改访问端口号config>index.js

     自己项目代码放在src里面里面。

    4.上面是最基本的项目,但是我们实际操作中会使用很多有助于我们项目开发的,比如需要引入jQuery、less等让我们快速编码

      引入路由  npm install vue-router

      引入vuex npm install vuex --save

      引入axios npm install axios --save

      引入jQuery npm install jquery --save

      引入less npm install less less-loader --save

    5.项目完成之后,打包上线

    npm run build

    打包完成后,会生成 dist 文件夹

    项目上线时,只需要将 dist 文件夹放到服务器就行了。

    佳物不独来,万物同相携。
  • 相关阅读:
    垃圾回收器
    垃圾回收相关概念
    Spring Cloud 框架 -- Spring Cloud Gateway
    Spring Cloud 框架 -- Zuul
    报错:Failed to read artifact descriptor for org.springframework.cloud:spring-cloud-starter-netflix-zuul:jar:2.2.2.RELEASE
    Spring Cloud 框架 -- Resilience4j
    Spring Cloud 框架 -- OpenFeign
    Spring Cloud 框架 -- Eureka 服务的注册与消费
    Spring Cloud 框架 -- Hystrix 的基本介绍与使用
    打包 Spring Boot 项目报错:Failed to execute goal on project provider: Could not resolve dependencies for project com.example:provider:jar:0.0.1-SNAPSHOT
  • 原文地址:https://www.cnblogs.com/rongrongtu/p/8608110.html
Copyright © 2020-2023  润新知