西京刀客
西京刀客

VSCode和VUE环境的初始安装配置

目录

    • 一、vscode和vue初始安装
      • 1. 安装配置vscode
      • 2. 安装vue相关
    • 二、使用vue-cli初始化一个vue项目
    • 三、使用vscode 推送新项目到码云
    • 四、常见问题整理
      • 1. vue init卡住，缓慢问题
      • 2. NPM install -save 和 -save-dev
      • 3. vscode字体放大
      • 4. vscode 如何快速定位到某文件、全局搜索、修改快捷键
      • 5. vue init webpack 与vue create 创建项目有什么区别
        • 5.1 vue-cli3
      • 6. 去掉vue.js中的Eslint
      • 7. Setup e2e tests with Nightwatch?
      • 8. 'git' 不是内部或外部命令，也不是可运行的程序
      • 9. ERROR in Cannot find module 'node-sass'

VSCode和VUE的初始安装及简单使用入门
参考URL: https://www.cnblogs.com/codingbylch/p/9604009.html

一、vscode和vue初始安装

1. 安装配置vscode

  1. 官网下载vscode System Installer 64 bit
    VSCode和VUE环境的初始安装配置_第1张图片
  2. vscode 常用插件安装
    安装 vetur 插件（vue语法高亮），eslint插件（智能错误监测）
    常用插件推荐:
  • open in browser：支持快捷键在浏览器中打开html文件；
  • ESLint（用于审查代码规范)

2. 安装vue相关

  1. 安装Node.js
    官网下载安装https://nodejs.org/en/

  2. 安装cnpm /配置淘宝的镜像服务器
    官网http://npm.taobao.org/

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
//or # 建议不要用cnpm 安装有各种诡异的bug 可以通过如下操作解决npm速度慢的问题

只改npm registry 不安装cnpm也可以利用淘宝的镜像服务器，使用cnpm只是其中的方式之一，如果对多安装出来的cnpm感觉多余，仍然可以继续使用npm指令。

设置npm的registry几种方法

  • 临时使用
    npm --registry https://registry.npm.taobao.org install express

  • 持久使用
    npm config set registry https://registry.npm.taobao.org

配置后可通过下面方式来验证是否成功
npm config get registry 或 npm info express

  1. 安装webpack（js应用程序的静态模块打包器module bundler）
    输入 npm install webpack -g 进行安装，如何报错则去掉-g。

  2. 安装vue-cli（用来生成vue模板的工具）
    npm install -g @vue/cli

  3. 新建一个Vue项目测试一下

二、使用vue-cli初始化一个vue项目

vue-cli初始化一个vue项目
参考URL: https://www.cnblogs.com/guolintao/p/7797601.html

vue-cli 是vue.js的脚手架，用于自动生成vue.js模板工程的。

  1. npm使用淘宝镜像

  2. 初始化webpack vue
    vue init webpack hello：基于webpack来构建一个名称为hello的vue项目（项目构建一定要联网！联网！联网！）

通过vue-cli完成配置以后，下一步需要安装vue所需要的依赖包，项目需要安装的依赖包在vue-cli工具自动生成的package.json文件中有说明：
dependencies：项目中实际需要使用到的依赖包
devDependencies：项目开发过程中需要使用的一些工具包

  1. 运行
    cd projectname
    npm run serve

三、使用vscode 推送新项目到码云

在vscode中使用Git
URL:
vs code 推送新项目到码云
参考URL: https://blog.csdn.net/lyqhn2012/article/details/79231161
在VSCode上新建的VUE项目第一次提交到码云
参考URL: https://blog.csdn.net/qq_33643072/article/details/80320863

  1. 打开vscode，文件->打开文件夹，选择我们第一步创建好的项目
  2. 在码云上新建一个空的项目把 使用Readme文件初始化这个项目的勾取消掉
  3. 在vscode中Ctrl+~ (~在tab键上面)打开cmd，已经cd到根目录
  4. 运行git init ： 建一个裸仓库
  5. git remote add origin 远程仓库地址 ：将本地的仓库和远程仓库关联
    git remote add origin https://gitee.com/shepf/myVue.git
git push -u origin master
  6. git pull origin master :将远程仓库的东西拉下来，与本地仓库合并（如果你1中没有取消勾选，会拉取失败，删除掉码云上的README.md再运行⑥）
  7. 在vscode界面左边第三个图标源代码管理->暂存所有更改->填写消息->Ctrl+Enter->推送到远程仓库地址
cd d:/wamp/www/mall360/wap              //首先指定到你的项目目录下
git init
touch README.md
git add README.md
git commit -m "first commit"
git remote add origin https://git.oschina.net/name/package.git   //用你仓库的url
git push -u origin master  //提交到你的仓库C

要想在VS Code里面使用Git需要在编辑器内配置git.path
配置步骤：在编辑器的文件->首选项->设置->搜索git.path->点击编辑->找到你的电脑git的安装目录，找到里面的bin文件夹，里面的git.exe文件把该文件的完整路径复制下来

“git.path”: “C:\Program Files\Git\bin\git.exe”,

四、常见问题整理

1. vue init卡住，缓慢问题

解决办法
npm的镜像替换成淘宝
1.看一下npm仓库地址：
npm get registry

得到仓库地址：>https://registry.npmjs.org/
2.替换地址
npm config set registry http://registry.npm.taobao.org/

备注：想要设置回原来的仓库地址就是将上面的命令地址改回去就行
npm config set registry https://registry.npmjs.org/

2. NPM install -save 和 -save-dev

我们在使用 npm install 安装模块的模块的时候 ，一般会使用下面这几种命令形式：

npm install moduleName # 安装模块到项目目录下

npm install -g moduleName # -g 的意思是将模块安装到全局，具体安装到磁盘哪个位置，要看 npm config prefix 的位置。

npm install -save moduleName # -save 的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖。

npm install -save-dev moduleName # -save-dev 的意思是将模块安装到项目目录下，并在package文件的devDependencies节点写入依赖。

总结
devDependencies 节点下的模块是我们在开发时需要用的，比如项目中使用的 gulp ，压缩css、js的模块。这些模块在我们的项目部署后是不需要的，所以我们可以使用 -save-dev 的形式安装。像 express 这些模块是项目运行必备的，应该安装在 dependencies 节点下，所以我们应该使用 -save 的形式安装。

3. vscode字体放大

  1. 统一放大
    查看->外观
  2. 只有代码放大
    文件->首选项->设置

4. vscode 如何快速定位到某文件、全局搜索、修改快捷键

  1. 快速定位到某文件
    ctrl + p
  2. 全局搜索
  3. 修改快捷点

5. vue init webpack 与vue create 创建项目有什么区别

[Vue CLI 3] 源码系列之init
参考URL: https://www.jianshu.com/p/4b5f7bb725be

用惯老版本 Vue CLI 的同学一般多会选择使用如下命令来创建模板项目：

vue init webpack demo

但是在新版中，推荐使用 vue create
如下所示， vue create 是Vue CLI 3 的命令

D:\vue-test>vue create my-app

  vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6.
  You may want to run the following to upgrade to Vue CLI 3:

  npm uninstall -g vue-cli
  npm install -g @vue/cli


D:\vue-test>

5.1 vue-cli3

vue-cli3.x 新特性及踩坑记
参考URL: https://segmentfault.com/a/1190000016423943?utm_source=tag-newest
Vue CLI 3搭建vue+vuex最全分析(推荐)
参考URL: https://www.jb51.net/article/148100.htm

vue cli 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。
然后安装新的vue-cli
npm install -g @vue/cli

  • 使用图形化界面

你也可以通过 vue ui 命令以图形化界面创建和管理项目：
上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。

  • 新建vue项目命令
  1. vue create 搭建新项目
    vue create //文件名 不支持驼峰（含大写字母）

如果没有配置保存过，则只有以下两个选项：

② default（babel，eslint）：

默认设置（直接enter）非常适合快速创建一个新项目的原型，没有带任何辅助功能的 npm包

③ Manually select features：

手动配置（按方向键 ↓）是我们所需要的面向生产的项目，提供可选功能的 npm 包

  • vue cli3项目改变
  1. 相比 vue-cli 2.X 创建的目录，vue-cli 3.0 创建的目录看不见 webpack 的配置
  2. 启动命令行
    由npm run dev 或者 npm start
    改变为：
    npm run serve
  3. 安装过程也发生了一些变化，配置可以保存，下次可以再用，像前面的 vue-webpack4。
  4. 手动配置 webpack：在根目录下新建一个 vue.config.js 文件，进行你的配置 :
const path = require('path');

module.exports = {
    // 基本路径
    baseUrl: './',
    // 输出文件目录
    outputDir: 'dist',
    // eslint-loader 是否在保存的时候检查
    lintOnSave: true,
    // webpack配置
    // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
    chainWebpack: () => {},
    configureWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
            config.mode = 'production';
        } else {
            // 为开发环境修改配置...
            config.mode = 'development';
        }

        Object.assign(config, {
            // 开发生产共同配置
            resolve: {
                alias: {
                    '@': path.resolve(__dirname, './src'),
                    '@c': path.resolve(__dirname, './src/components')
                }
            }
        });
    },
    // 生产环境是否生成 sourceMap 文件
    productionSourceMap: true,
    // css相关配置
    css: {
        // 是否使用css分离插件 ExtractTextPlugin
        extract: true,
        // 开启 CSS source maps?
        sourceMap: false,
        // css预设器配置项
        loaderOptions: {},
        // 启用 CSS modules for all css / pre-processor files.
        modules: false
    },
    // use thread-loader for babel & TS in production build
    // enabled by default if the machine has more than 1 cores
    parallel: require('os').cpus().length > 1,
    // PWA 插件相关配置
    // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
    pwa: {},
    // webpack-dev-server 相关配置
    devServer: {
        open: process.platform === 'darwin',
        host: '0.0.0.0',
        port: 8080,
        https: false,
        hotOnly: false,
        // proxy: {
        //     // 设置代理
        //     // proxy all requests starting with /api to jsonplaceholder
        //     'http://localhost:8080/': {
        //         target: 'http://baidu.com:8080', //真实请求的目标地址
        //         changeOrigin: true,
        //         pathRewrite: {
        //             '^http://localhost:8080/': ''
        //         }
        //     }
        // },
        before: (app) => {}
    },
    // 第三方插件配置
    pluginOptions: {
        // ...
    }
};
  1. vue cli 3 ：摒弃 static 新增了 public 。vue cli 3 中“静态资源”两种处理方式：

经webpack 处理：在 JavaScript 被导入或在 template/CSS 中通过“相对路径”被引用的资源会被编译并压缩

不经webpack 处理：放置在 public 目录下或通过绝对路径被引用的资源将会“直接被拷贝”一份，不做任何编译压缩处理

  1. babel.config.js：

配置Babel 。Vue CLI 使用了 Babel 7 中的新配置格式 babel.config.js。和 .babelrc 或 package.json 中的 babel 字段不同，这个配置文件不会使用基于文件位置的方案，而是会一致地运用到项目根目录以下的所有文件，包括 node_modules 内部的依赖。官方推荐在 Vue CLI 项目中始终使用 babel.config.js 取代其它格式。

6. 去掉vue.js中的Eslint

eslint是语法检查工具，但限制太过于严格，大部分开发人员无法适应，所以产生这个需求
如果不符合规范就会报错，有时候我们不想按照他的规范去写。这时我们需要关闭。这里有两种方法。
1.在搭建vue脚手架时提示是否启用eslint检测的。 Use ESLint to lint your code? 写 no;
2.如果项目已经生成，我们可以这样。
我们只要修改build\webpack.base.conf.js这个文件就好

eslint可辅助规范代码风格，有效控制代码质量，并且在多人合作的情况下，也可以使代码看起来更加的整洁。所以在开发过程中，还是建议保留eslint的校验的，养成一个好的编码习惯。

7. Setup e2e tests with Nightwatch?

参考URL: https://www.itcodemonkey.com/article/8422.html

e2e 自动化测试
如何确定用户可以顺利走完流程呢? 一个流程可以很长

打开网页
浏览商品
加入购物车
下单确认
付款

单纯依靠人力来测试完整功能非常耗时耗力, 这时候自动化测试就体现价值了

自动化测试是把人的测试行为转化为机器执行的程序, 可以提高效率, 解放生产力, 节省人力成本和时间成本, 降低人类易出错的风险

现代比较流行的 e2e 测试框架有

Nightwatch
TestCafe
Protractor
WebdriverIO
Cypress

写一个最迷你的端到端自动化测试

首先 Nightwatch 需要一个配置文件 nightwatch.conf.js

module.exports = {
  "webdriver": {
    "server_path": "/usr/bin/safaridriver", // 浏览器 driver 的 bin 执行路径
    "start_process": true, // 需要启动 driver
    "port": 9515 // driver 启动的端口, 一般是 9515 或 4444
  },
  "test_settings": {
    "default": {
      "desiredCapabilities": {
        "browserName": "safari" // 浏览器的名字叫 safari
      }
    }
  }
}

此处之所以使用 safaridriver 是因为 mac 系统已经内置了 safaridriver, 零安装成本

然后来写一个简单易懂的测试脚本 e2e.test.js

module.exports = {
  'Basic e2e Test' (browser) {
    browser
      .url('http://so.com') // 打开 so.com 网页
      .waitForElementVisible('body') // 确认能看到 body 元素
      .setValue('#input', 'Nightwatch') // 在搜索框输入 Nightwatch
      .click('#search-button') // 点击搜索
      .pause(1000) // 等待1秒钟
      .assert.containsText('#container', 'Nightwatch') // 查询结果包含 Nightwatch
      .end()
  }
}

执行一下看测试结果

$ nightwatch basic-e2e.test.js

[Basic e2e Test] Test Suite
===========================
Running:  Basic e2e Test

✔ Element  was visible after 17 milliseconds.
✔ Testing if element <#container> contains text: "Nightwatch".

OK. 2 assertions passed. (3.419s)

总结： e2e测试，就是UI测试，模拟用户一套流程交互点击测试。

8. ‘git’ 不是内部或外部命令，也不是可运行的程序

npm install --save nprogress nprogress/nprogress.css时，报错’git’ 不是内部或外部命令，也不是可运行的程序
配置git环境变量，测试还是不行。最后去掉了nprogress/nprogress.css，只执行如下命令
npm install --save nprogress

9. ERROR in Cannot find module ‘node-sass’

错误表示找不到node-sass模块。
因为cnpm安装导致的，换成npm安装就好

或者cnpm install node-sass@latest

解决方法：

输入命令：cnpm install node-sass@latest

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