Vue项目搭建和配置

创建Vue项目

1、在当前目录下创建项目

vue create .

2、选择自定义创建，反选掉lint / formatter选项

3、添加eslint所需的包

npm i eslint eslint-plugin-vue @vue/eslint-config-airbnb prettier prettier-eslint vue-eslint-parser -D

4、创建eslint配置文件

module.exports = {
  extends: ['plugin:vue/recommended', '@vue/airbnb'],
  rules: {
    'linebreak-style': ['off', 'windows'],
    'no-shadow': ['error', { allow: ['state'] }],
  },
};

配置vscode

1、下载相关插件

vetur、ESLint、Prettier ESLint

2、配置相关选项，如tabsize=2

3、配置默认格式化的方式，要在对应格式下的文件中配置

首次使用 alt+shift+f 快捷键进行格式化选择格式化方式Prettiier ESLint，

a. 若选择错误，可通过 ctrl+shift+p 搜索open settings，

打开配置文件，删除配置的默认格式化项即可再下次格式化时，重新选择

b. 也可通过 ctrl+shift+p 搜索format document with，配置新的默认格式化选项

最终settings.json文件中至少要有以下配置项

{
    "[vue]": {
        "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
    },
    "editor.tabSize": 2
}

git换源

1. 查看当前源
2. 删除当前源
3. 添加新源
4. 推送本地代码到远程(会提示输入gitee账号和密码)

git remote -v
git remote remove origin
git remote add origin https://gitee.com/feng-yixing/dlseed.git
git push -u origin master

修改vue脚手架默认使用的包管理工具

vi ~/.vuerc

Vue项目中使用非npm下载的js包

1. 将第三方包引入到public文件夹下
2. 在public下的index.html中引入这个第三方包
3. 在vue.config.js文件中配置externals，就可以在组件中通过import引入包中提供给外部使用的变量和方法了

module.exports = {
    configureWebpack: {
        externals: {
            // 包名：全局变量名
            jsencrypt: 'JSEncrypt'
        }
    }
}

Vue打包静态文件引入地址配置

module.exports = {
    publicPath: '/marketPlat'
}