nodejs+Vuecli+webpack 创建项目一

1. 安装nodejs环境

使用npm -v 查看安装版本

>npm -v
6.14.8

2.安装vuecli

@next 安装最新的稳定版本

npm install -g @vue/cli

使用下方命令检查是否安装成功，以及安装的版本

vue -V

3. 创建初始化项目

vue init webpack vuedemo 
? Project name (vuedemo)      //项目名称，可以直接回车，默认命令行上的额名字
? Project description (A Vue.js project) simple demo   //项目描述
? Author xxx    //作者
Vue build (Use arrow keys)   // 默认使用第一个即可，直接回车
> Runtime + Compiler: recommended for most users
  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere 
? Install vue-router? (Y/n) Y //是否安装vue的路由插件，需要使用选择Y
? Use ESLint to lint your code? (Y/n) //是否使用ESLint来限制你的代码错误和风格，如果yes会出现下面的
> Standard (https://github.com/standard/standard) //直接默认标准
  Airbnb (https://github.com/airbnb/javascript)
  none (configure it yourself) 
 ? Set up unit tests (Y/n) n //是否需要安装单元测试
 ? Setup e2e tests with Nightwatch? (Y/n)n //是否需要e2e来进行用户行为模拟测试
 ? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
> Yes, use NPM  //直接默认第一个
  Yes, use Yarn
  No, I will handle that myself

4.启动项目

进入项目的主目录进行启动项目

cd vuedemo
npm run dev

看到以下内容证实项目启动成功

 DONE  Compiled successfully in 7521ms                                                                                                               下午10:05:19
 I  Your application is running here: http://localhost:8080

5.使用浏览器访问

证明项目成功启动

6.目录文件介绍

项目创建后相关目录介绍

.
|-- build                            // 项目构建(webpack)相关代码
|   |-- build.js                     // 生产环境构建代码
|   |-- check-version.js             // 检查node、npm等版本
|   |-- utils.js                     // 构建工具相关
|   |-- vue-loader.conf.js			 // webpack loader配置
|   |-- webpack.base.conf.js         // webpack基础配置
|   |-- webpack.dev.conf.js          // webpack开发环境配置
|   |-- webpack.prod.conf.js         // webpack生产环境配置
|-- config                           // 项目开发环境配置
|   |-- dev.env.js                   // 开发环境变量
|   |-- index.js                     // 项目一些配置变量
|   |-- prod.env.js                  // 生产环境变量
|   |-- test.env.js                  // 测试环境变量
|-- src                              // 源码目录
|   |-- components                     // vue公共组件
|   |-- store                          // vuex的状态管理
|   |-- App.vue                        // 页面入口文件
|   |-- main.js                        // 程序入口文件，加载各种公共组件
|-- static                           // 静态文件，比如一些图片，json数据等
|   |-- data                           // 群聊分析得到的数据用于数据可视化
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义代码格式
|-- .gitignore                       // git上传需要忽略的文件格式
|-- .postcssrc.js					 // postcss配置文件
|-- README.md                        // 项目说明
|-- favicon.ico 
|-- index.html                       // 入口页面
|-- package.json                     // 项目基本信息，包依赖信息等
.

7.使用webpack打包

打包之前修改文件主目录下的config/index.js 修改内容如下：

 build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './', //将原来默认的/改为./ 仅修改此处即可

然后将命令行切换到项目主目录下执行下方命令:

npm run build

在执行完成后，会发现项目主目录中多出了个dist文件夹，直接双击index.html 使用浏览器打开，若能够正常打开且访问正常即打包完成
另外webpack打包时一般会将小的图片做base64处理，如果需要将部分的静态资源放在static目录下时，在引入路径中可以使用绝对路径