Vue单文件组件环境配置

单文件组件不能直接运行使用，需要依赖node项目对其进行解析打包，在使用之前需要先进行环境配置

1. 安装node版本管理工具nvm

   1. curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
      // 更新配置
      source .bashrc
      

2. 安装最新版本的node

   【通过 node -V 来查看是否已经安装   ，这行命令在任何地方都可以执行】 

   1. nvm install node
      

3. 更新npm的安装源

   1. npm config set registry https://registry.npm.taobao.org
      

4. 创建项目目录

   1. mkdir project
      

5. 进入项目目录，初始化项目目录

   1. cd project
      npm init
      

   2. 初始化完成后在当前目录中会生成一个package.json文件，该文件指定项目所以依赖的模块

6. 配置package.json文件  【用以下内容替换默认的内容，在项目中打开后再替换】

   1. {
          "name": "project",
          "version": "1.0.0",
          "description": "",
          "main": "index.js",
          "scripts": {
              "test": "echo \"Error: no test specified\" && exit 1",
              "build": "webpack"
          },
          "keywords": [],
          "author": "",
          "license": "ISC",
          "dependencies": {
              "babel-core": "^6.22.1",
              "babel-loader": "^7.1.1",
              "babel-preset-env": "^1.3.2",
              "babel-preset-stage-2": "^6.22.0",
              "babel-register": "^6.22.0",
              "css-loader": "^0.28.11",
              "element-ui": "^2.7.2",
              "file-loader": "^1.1.4",
              "lodash": "^4.17.4",
              "style-loader": "^0.23.1",
              "url-loader": "^1.1.2",
              "vue": "^2.6.10",
              "vue-loader": "^15.7.0",
              "vue-router": "^3.0.2",
              "vue-style-loader": "^3.0.1",
              "vue-template-compiler": "^2.5.2",
              "webpack": "^4.29.6",
              "webpack-cli": "^3.3.0",
              "webpack-dev-server": "^3.2.1"
          }
      }
      

   2. g该文件定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install 命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。

7. 安装项目依赖模块   【在VSCode中就可以执行此命令】

   1. npm install
      

8. 创建项目文件 main.js ,index.html, App.vue

   1. touch index.html main.js App.vue. 
      
      可以借助vscode编辑工具创建文件
      

   2. index.html文件时项目的首页文件

   3. main.js 文件定义vue及调用单文件组件，也是项目打包时所依赖的文件

   4. App.vue文件为单文件组件文件

9. 创建webpacke打包的配置文件webpack.config.js  【在VSCode中下载Vetur插件来对此进行智能提示】【此配置文件是需要手动新建的，把下面的这些配置放到新建的文件中】

   1. const path = require('path')
      const VueLoaderPlugin = require('vue-loader/lib/plugin');
      
      module.exports = {
          entry: { main: "./main.js" }, //入口文件
          output: {
              filename: 'index.js', //出口文件名
              path: path.resolve(__dirname), //当前目录
              library: 'index' // 打包后模块的名称
          },
          plugins: [
              // make sure to include the plugin for the magic
              new VueLoaderPlugin()
          ],
          module: {
              rules: [ //定义不同类型的文件使用的loader
                  {
                      test: /\.vue$/,
                      loader: 'vue-loader'
                  },
                  {
                      test: /\.js$/,
                      loader: 'babel-loader'
                  },
                  {
                      test: /\.css$/,
                      loader: 'vue-style-loader',
                  },
                  {
                      test: /\.css$/,
                      loader: 'css-loader',
                      options: {
                          minimize: true //添加
                      }
                  }, 
                  {
                      test: /\.(eot|svg|ttf|woff|woff2)$/,
                      loader: 'file-loader'
                    },
              ]
          }
      }
      

   2. 在通过webpack对项目进行打包时，需要指定相应的配置文件，同过配置文件对单文件组件中的各个内容进行解析，生成一个index.js的压缩文件，在index.html只需引该文件就可进行页面加载渲染

目录创建完成后结构如下