zoukankan      html  css  js  c++  java
  • VSCode 搭建 Vue项目 lite-server

    VSCode搭建Vue项目

    vscode vue 格式化

    1.在 vscode 的extension中搜索 “vetur”插件,并安装,安装成功后重启编辑器。

    2.设置,查找 vetur.editor.defaultFormatter
    Editor:Default Formatter 选择 Vetur

    1.假设Vscode、nodejs等已经安装
    打开VScode的终端,调出命令输入框。点击终端-新建终端。
    node -v && npm -v

    查看npm安装的插件
    npm ls -g cnpm
    npm ls -g --depth 1

    2.vue-cli可以帮助我们快速构建Vue项目。
    npm install -g vue-cli

    3.安装webpack,它是打包js的工具
    npm install -g webpack

    4.始创建vue项目
    首先创建一个文件夹用来存放你的项目,用vscode打开对应的文件夹,并在终端cd到对应的文件夹
    vue init webpack myvue

    1.项目名称,如果不需要就直接回车
    2.项目描述,如果不需要就直接回车
    3.项目作者,默认计算机用户名
    4.构建方式,两个选择(上下箭头选择,回车即为选定,vscode支持箭头选择)
    建议选择 : Runtime + Compiler:recommended for most users
    5.安装vue的路由插件,需要就选y
    6.是否使用ESLint检测你的代码,建议选择 ‘N’
    因为选择 ‘Y’ 在做调试项目时,控制台会有很多 黄色警告 提示格式不规范,但其实并不影响项目
    7.是否安装单元测,建议 : N
    8.是否安装E2E测试框架NightWatch(E2E,也就是End To End,“用户真实场景”)建议 : N
    9.项目创建后是否要为你运行“npm install”?这里选择包管理工具(上下箭头选择,回车即为选定,vscode支持箭头选择)
    // 使用npm
    // 使用yarn
    // 自己操作

    完成之后的vscode左边可以看到如下目录,其中main.js就是入口。


    5.运行项目
    先cd到项目文件夹,cd myvue,然后输入以下指令
    完成之后,项目文件夹中会出现一个dist文件夹,里面就是打包之后的内容,直接部署就好

    npm 部署方式
    npm run dev
    npm run build

    yarn 部署方式
    yarn run dev
    yarn build


    npm与yarn比较:
    npm init             yarn init           初始化项目
    npm install/link         yarn install/link       默认安装依赖
    npm install taco --save     yarn add taco        安装某个依赖,并默认保存到package
    npm uninstall taco --save      yarn remove taco       移除某个依赖
    npm install taco --save-dev    yarn add taco --dev     安装某个开发时依赖
    npm update taco --sav      yarn upgrade taco      更新某个依赖
    npm install taco --global     yarn global add taco    安装某个全局依赖
    npm publish/login/logout     yarn publish/login/logout    发布/登录/登录
    npm run/test           yarn run/test       运行某个命令


    Yarn 独有的命令:
     yarn licenses ls —— 允许你检查依赖的许可信息
     yarn licenses generate —— 自动创建依赖免责声明 license
     yarn why taco —— 检查为什么会安装 taco,详细列出依赖它的其他包
     yarn why vuepress —— 检查为什么会安装 vuepress,详细列出依赖它的其他包

    lite-server 安装

    npm init
    npm install --save-dev lite-server


    修改package.json文件,加入如下语句:

    "scripts": {
    "dev": "lite-server",
    "start": "lite-server"
    },

    默认端口是3000,如果想使用其他端口需要修改配置:

    新建bs-config.json文件,
    {
    "port":8084,
    "browser" : ["chrome"]
    }

    高级玩法
    删除json配置文件,新建bs-config.js文件,
    在这里你可以自定义lite-server的行为,在刷新的时候执行各种回调函数,比如压缩css,比如合并js等

    "use strict";

    module.exports = {
    injectChanges: false,
    files: [ './**/*.{html,htm,css,js}' ],
    watchOptions: { ignored: 'node_modules' },
    server: {
    baseDir: './',
    middleware: []
    },
    "port":8084,
    "browser" : ["chrome"]
    }

  • 相关阅读:
    OSI安全体系结构
    PHP 二维数组根据相同的值进行合并
    Java实现 LeetCode 17 电话号码的字母组合
    Java实现 LeetCode 16 最接近的三数之和
    Java实现 LeetCode 16 最接近的三数之和
    Java实现 LeetCode 16 最接近的三数之和
    Java实现 LeetCode 15 三数之和
    Java实现 LeetCode 15 三数之和
    Java实现 LeetCode 15 三数之和
    Java实现 LeetCode 14 最长公共前缀
  • 原文地址:https://www.cnblogs.com/vicowong/p/14898215.html
Copyright © 2011-2022 走看看