VUE 环境搭建基础-CSDN博客

本文链接：https://blog.csdn.net/wq5350/article/details/108349032

文章目录

npm

npm（node package manager），是一个基于Node.js的包管理器，所以npm的安装基于Node.js

包

含有package.json描述文件并发布到npm仓库的文件

package.json

描述一个项目所需要用到的所有依赖包及其版本号，必须包含name和version属性。

{
  "name": "blog_web",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "Kingraymone <555444333@qq.com>",
  // 是否私有，false才发布到npm
  "private": true,
  // 脚本，通过npm run dev/start/build 执行
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },
  // 生产环境需要用到的依赖包
  "dependencies": {
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },
  // 本地开发环境需要用到的依赖包
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
	······
  },
  // 指定node和npm的版本号
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  // 浏览器列表
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

模块

在node_modules中，可以被require()方法加载的文件

常用命令

npm init --yes
初始化package.json文件，添加–yes则使用默认置跳过填写属性

npm install
默认安装到本地，下载最新版本
npm install XXX@version -g 全局安装
npm install --production 只安装dependencies中依赖包
npm install packageName --save 安装的包放入dependencies依赖中
npm install packageName --save -dev 安装的包放入devDependencies依赖中

npm update
更新本地包
npm outdated
查看版本号
npm uninstall
卸载本地包

babel
babel是一种js语法编译器,将js编译为兼容大多数浏览器的代码，通过配置.babelrc文件完成编译
.babelrc配置

{
	// 为babel安装指定的插件
	"presets":["XX",options],
	// 插件
	"plugins":[]
}

安装npm

安装Node.js，下载地址
默认会添加环境变量
新建node_global和node_cache配置全局库和缓存

npm config set prefix “node_global路径”
npm config set cache “node_cache路径”

require在本地找不到模块时会到NODE_PATH环境变量定义的路径寻找

CommonJS

CommonJS是一种使用广泛的JavaScript模块化规范，通过require方法来同步地加载其他模块，通过module.exports导出需要暴露的接口。
通过exports和require方法导出引入模块。exports 的方法可以直接调用，module.exports需要new对象之后才可以调用

webpack

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler),官网

入口(entry)：指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始
出口(output)：output 属性告诉 webpack 在哪里输出它所创建的 bundles
loader：oader 可以将所有类型的文件转换为 webpack 能够处理的有效模块

test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
use 属性，表示进行转换时，应该使用哪个 loader。

插件(plugins)：插件接口功能极其强大，可以用来处理各种各样的任务

const webpack = require('webpack'); // 用于访问内置插件

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，通过在store.js中定义全局变量，在组件中使用$route.XX来使用。

1.响应式：当store仓库中的状态state发生改变时，对应组件也会更新
2.状态不能直接修改，只能通过commit完成改变

Vue-cli

Vue-cli是vue官方出品的快速构建单页应用的脚手架，cli:command-line interface 命令行接口

安装过程

npm i -g vue-cli
vue -V 查看版本号
在需要创建项目的路径下执行 vue init [模式] [项目名] 创建项目

Project name :项目名称
Project description:项目描述
Author：作者
Install vue-router? 是否安装vue的路由插件
Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。
setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha
Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试

npm start 或者 npm run dev 启动项目
项目结构理解

–build 项目构建(webpack)相关代码
–config 项目开发环境配置
–dist 项目打包之后生成的文件
–src 源码目录
　--api axios请求
　--assets 静态资源
　--component vue组件
　--config 项目配置
　--directive 自定义指令
　 --router 路由配置
　--store Vuex配置
　--views 页面文件
–static 静态文件
–.babelrc ES6语法编译配置
–.editorconfig 定义代码格式
–.gitignore git上传需要忽略的文件格式
–.postcssrc.js css浏览器兼容
–index.html 入口页面
–package.json 项目基本信息