vue环境安装

vue环境搭建过程

• 安装node环境
  node -v 命令行显示v12.19.0,这样就代表安装完成

由于在国内使用npm是非常慢的，所以在这里我们推荐使用淘宝npm镜像，使用淘宝的cnpm命令管理工具可以代替默认的npm管理工具：npm install -g cnpm --registry=https://registry.npm.taobao.org

• 全局安装使用vue-cli脚手架

全局安装的插件,卸载的时候要 加上-g npm uninstall xxx -g

cnpm install --global @vue/cli 等待安装成功

vue -V 命令行显示@vue/cli 4.5.8 代表vue-cli安装成功

创建项目

- `vue create test` 开始创建`test`项目
- 选择 `Manually select features`,表示自定义配置
- 按空格勾选`Choose Vue version`,`Babel`,`Router`,`Vuex`,`CSS Pre-processors`,`Linter /Formatter`,具体选什么组件看项目选择,然后按回车进行下一步操作
- 选择版本,2.x或者3.x,版本不同,有兼容性问题和语法问题,所以要慎重选择
-  Use history mode for router? 选`n`
- 由于勾选了`CSS Pre-processors`,这里会让`Pick a CSS pre-processor`,选择自己用的处理器即可
-  Pick a linter / formatter config: 这里建议选` ESLint + Standard config`
- 选 `Lint on save`,保存时触发Lint
- Where do you prefer placing config for Babel, ESLint, etc.,这里强烈建议选`In dedicated config files` 让每个插件单独配置,方便以后维护
- 是否保存设置,如果保存了,下次可以使用这套配置快速生成

安装webpack

vue-cli里实际上包含了webpack,如果和vue一起使用的话就不用安装

• 全局安装webpack

cnpm install webpack@^4.44.2 -g ,这里最好指定版本,免得出兼容性问题

• 项目中安装webpack-cli

  cd到项目路径下,执行cnpm install webpack-cli -D

  查看安装:webpack -v 显示

webpack-cli 4.1.0
webpack 4.44.2

运行vue项目

默认vue添加了三种,在package.json文件中scripts里

• npm run serve 运行,热部署,开发中使用

• npm run build 编译打包

• 项目中添加配置vue.config.js

  vue inspect > output.js 可以查看打包相关配置

const path = require('path')
module.exports = {
    configureWebpack: {
        // 编译模式 :development 和 production,一个是开发环境,一个是生产环境
        mode: 'production',
		resolve: {
			alias: {
                // 给src/assets/styles/ 文件夹取一个别名,这样在项目中可以不用写全路径
                // @import '~styles/theme.styl',注意<style lang="stylus" scoped> 标签下的import,~不能少
                styles: path.join(__dirname, 'src', 'assets', 'styles')
			}
		}
	},

    css: {
      extract: false
    }
}

在图像化界面管理项目

• 命令行vue ui启动界面,可以管理整个项目

发布项目

• 编译好以后,不能直接打开index.html,需要依赖一个http服务,例如 nginx,tomcat

• 以tomcat为例

  • 把dist文件夹下的所有文件,复制到tomcat安装路径\webapps\ROOT\
  • 启动tomcat,因为http服务默认会寻找根路径下的index.html文件,所以打开以后首页就是自己的项目首页

npm常用命令可选参数解释

建议不要全局安装一些模块,因为队友不知道你安了啥

• npm install xxx -S -S 即--save,包名会被注册在package.json的dependencies里面，在生产环境下这个包的依赖依然存在

• npm install xxx -D -D 即--save-dev,包名会被注册在package.json的devDependencies里面，仅在开发环境下存在的包用-D，如babel，sass-loader这些解析器

• npm install xxx 啥也不写,包名不会进入package.json里面，因此别人不知道你安装了这个包（坑队友行为）

• npm i xxx -D i是install的简写

• npm i module_name -g -g是--global的简写,代表全局安装