• 如何启动一个Vue3.x项目


    1. 安装node.js

    2. cd到项目目录下

    3. npm run serve

     

    Node.js下载与安装(npm)

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 JavaScript本来只能跑在浏览器上,然后Node.js就
    
    是一种能让js直接运行在操作系统的工具。并且它就能够让JS代码在操作系统上实现一些类似文件操作等功能。
    
    Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。
    npm 是JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。
    (类似Python中的pip一样。)
    由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了。同样可以通过输入 npm -v 来测试是否成功
    安装。命令如下,出现版本提示表示安装成功:

    更新npm至最新的稳定版本

    npm install npm@latest -g

    npm常用命令:

    https://segmentfault.com/a/1190000012099112

    使用cnpm

    因为npm安装插件是从国外服务器下载,受网络影响大,安装依赖包的时候经常会出现超时的问题。我们可以使
    用cnpm 代替npm。
    cnpm是淘宝团队维护的一个完整 npmjs.org 镜像,用来代替官方版本(只读),同步频率目前为 10分钟 一次以保证
    尽量与官方服务同步。
    npm install -g cnpm --registry=https://registry.npm.taobao.org

    cnpmnpm用法完全一致,只是在执行命令时将npm改为cnpm

    例如: cnpm install bootstrap@3.3.7

    webpack介绍

    webpack 就是一个把我们在后端写的JS代码打包成浏览器认识的JS文件(当然webpack 很强大它可以打包JS、
    CSS、图片等静态资源)。 我们并不关心打包后的JS文件里面的内容都是什么,只要它体积小、浏览器能认识就可
    以了。
    webpack安装
    我们这里安装的是 webpack v4+ 版本,还需要安装CLI工具配合。我们这里安装的是webpack-cli 。执行下面的
    命令同时安装webpack 和webpack-cli 。
    npm install webpack webpack-cli -g -D

    启动一个Vue3.x项目

    Vue-CLI安装:    Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)

    vue-cli 是一个Vue官方提供的快速构建Vue项目的脚手架工具,能够极大的提高开发效率。

    全局安装最新版本vue-cli

    npm install -g @vue/cli

    安装完毕后检查vue-cli版本:

    vue --version

    Vue-CLI使用

    vue create 项目名称

    接下来具体创建过程见下方GIF动图:

    使用浏览器打开http://localhost:8080/ ,就能看到Vue项目已经搭建好了。

    除了上面命令行方式创建Vue项目外,还可以使用vue ui 命令以图形化界面创建和管理项目。

    vue ui

    补充常用命令(需进入项目目录下执行):

    1. 安装项目依赖/配置项目(拿到一个Vue项目之后先运行这个安装包依赖)

    npm install

    2. 编译并在本地启动一个开发环境

    npm run serve

    3. 编译并打包一个生产版本

    npm run build

    4. 运行测试(前提你要写好测试脚本)

    npm run test

    5. 运行代码检测

    npm run lint

  • 相关阅读:
    swoole推送信息一对一,一对多
    laravel5.8笔记十:Redis操作
    laravel5.8笔记九:数据库曾、更、查、删
    laravel5.8笔记八:数据库(单库和多库)
    laravel5.8笔记七:语言包
    laravel5.8笔记六:公共函数和常量设置
    laravel5.8笔记五:基类控制器和基类模型
    laravel5.8笔记四:中间件
    laravel5.8笔记四:路由
    微软开源自动机器学习工具NNI安装与使用
  • 原文地址:https://www.cnblogs.com/niuli1987/p/10234624.html
Copyright © 2020-2023  润新知