关于javascript:第1讲-使用vuecli30创建项目

vue-cli 3.0 是基于 webpack 4.0 之上构建的 vue 脚手架工具，得益于 webpack4.0 的零配置个性，使得在应用 vue-cli 3.0 时，零配置就能够开发和打包 vue 我的项目

vue-cli 3.0 及更高版本为了区别 vue-cli 1.0 和 vue-cli 2.0，名字更改成了 @vue/cli，如果你的电脑曾经装置了比方 vue-cli 2.0，须要卸载它，而后装置 @vue/cli，不必放心装置了更高版本的 vue-cli 不能兼容老我的项目，比方用 vue-cli 2.0 创立的我的项目，启动和打包还是别离应用 npm run dev 和 npm run build 即可

 
vue --version // 查看电脑上已装置的 vue-cli 的版本
 
npm uninstall vue-cli -g  // 卸载老版本 vue-cli
 
npm install -g @vue/cli // 装置 3.0 版本的 vue-cli

mac 电脑卸载和装置 vue-cli 形式如下：

 
sudo chmod -R 777 /usr/local/lib/node_modules/  // 放开权限
 
sudo npm uninstall vue-cli -g  // 卸载老版本
 
sudo npm install -g @vue/cli  // 装置新版本

装置结束，在 cmd 中输出 vue ui，启动我的项目管理器，新建一个 vue 我的项目，在这个过程须要操作步骤有：

 
1. 新建我的项目文件夹 -vue-base-frame
 
2. 抉择包管理器 -npm
 
3. 初始化 git 仓库默认关上
 
4. 抉择一套预设 -- 抉择手动
 
5. babel- 关上
 
6. Router- 关上
 
7. Vuex- 关上
 
8. CSS Pre-processors（css 预处理器）- 关上
 
9. 应用配置文件 - 关上
 
10. pick a css pre-processor 下拉抉择 less
 
11. pick a linter / formatter config 下拉抉择 eslint + standard config
 
12. lint on save- 关上
 
13. 而后点击“创立我的项目，不保留预设”

通过上述步骤，就能够静待 vue 根底模板下载下来，当模板下载实现后，cmd 进入我的项目根目录，执行 npm run serve 启动我的项目，这和 vue-cli 2.x 版本中 npm run dev 启动形式不一样，启动实现，浏览器关上这个我的项目，能够看到两个简略的页面 Home 和 About，接下来，须要对这个 vue 模板进行革新，在革新之前，我先来介绍一下，我的项目里各个文件的作用

先从我的项目根目录开始看起，次要有三个文件

1. package.json 我的项目配置文件，我的项目中所需的依赖都会在这里阐明，当其他人要应用你这个我的项目时，只须要执行 npm install 就能够装置这些依赖，启动我的项目了，这里解析下 json 文件外面 dependencies 和 devDependencies，dependencies 申明生成环境所须要的依赖，也就是我的项目打包当前这些依赖也是要打包进去的，而 devDependencies 代表开发环境的依赖，也就是方面你开发而加载的一些依赖，这些依赖在我的项目打包时不会放进去
2. public 文件夹 公共文件夹，在 vue-cli 2.x 创立的我的项目模板中，就是 static 这个文件夹，vue-cli 3.x 创立的我的项目模板中，取而代之的就是这个 public 文件夹，这外面有一个 index.html 文件，它是提供给 webpack，使其在运行和打包的时候作为模板文件应用，生成最初我的项目里的 index.html
3. src 文件夹 这是我的项目的主文件夹，当前咱们开发都是在这个文件夹内实现的

再来看下这个 src 这个主文件夹里都有哪些文件：

1. assets 寄存我的项目里的动态资源文件，比方图片，图标，字体文件等
2. components 从代码里抽离出一些可复用的逻辑组成一个组件，以便咱们复用
3. views 我的项目里的页面都放在这个文件夹里
4. App.vue 我的项目里的根底组件（根组件）
5. main.js 我的项目的入口文件，我的项目在开发运行或者编译的时候，都会以这个为起始点
6. router 寄存路由文件
7. store 寄存状态管理文件

以上就是咱们下载下来的初始 vue 模板的所有阐明，这里提醒一下，因为在启动 vue ui（我的项目管理器）上开启了 eslint 代码查看，这里避免你当前写代码始终报空格和换行谬误，须要在根目录里找到.editorconfig 文件和.eslintrc.js 文件，批改一下

 
// .editorconfig.js
 
[*.{js,jsx,ts,tsx,vue}]
 
indent_style = space
 
indent_size = 4 // 将这个我的项目默认的 2 改为 4
 
trim_trailing_whitespace = true
 
insert_final_newline = true

 
// .eslintrc.js
 
 rules: {'indent': ['error', 4], // 新增这一行代码
 
 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
 
 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
 
 }

vue.config.js 文件

你会发现通过 vue-cli 3.x 创立的我的项目里没有这个文件，是因为最开始我讲到了基于 webpack4.0 个性 0 配置个性，在应用 vue-cli 3.0 创立我的项目的时候，webpack 的配置均被暗藏了，老版本的 vue-cli，创立的我的项目，咱们能够找到 build 和 config 这两个文件夹，然而 vue-cli 3.x 创立的我的项目曾经没有这两个文件夹，当须要笼罩原有配置时，须要在根目录下新建 vue.config.js 文件，来配置新的配置，当我的项目启动当前 vue.config.js 会被主动加载

 
// vue.config.js
 
/* 如果以后是生产环境 production
 
如果我的项目部署到域名（www.baidu.com）根目录下，间接 '/' : '/',
 
如果须要部署到（www.baidu.com/iview-admin）目录下，间接 '/iview-admin/' : '/'
 
如果是开发环境，间接 '/' : '/' */
 
const BASE_URL = process.env.NODE_ENV === 'production' ? '/iview-admin/' : '/'
 
/* 引入 node 的 path 模块 */
 
const path = require('path')
 
/* 自定义办法 resolve */
 
const resolve = dir => {return path.join(__dirname, dir);
 
}
 
  
 
// 引入 webpack
 
// const webpack = require('webpack')
 
  
  
  
 
module.exports = {
 
 lintOnSave: false, // 敞开 eslint 查看
 
 /* webpack 配置 */
 
 chainWebpack: config => {
 
 config.resolve.alias
 
 .set('@', resolve('src')) // 用 @代替 src，在我的项目里你须要引入文件的时候，只须要 @/api,@/config,@/mock... 即可
 
 .set('_c', resolve('src/components')) // 用_c 代替 src/components, 咱们须要引入组件时，只须要_c/HelloWorld.vue 即可
 
 },
 
  
 
 // 打包时不生成 map 文件，这样缩小打包的体积，并且放慢打包的速度
 
 productionSourceMap: false,
 
  
 
 // 跨域配置
 
 devServer: {
 
 /* 主动关上浏览器 */
 
 open: true,
 
 hot: true, // vue cli3.0 敞开热更新
 
 // liveReload: false, // webpack liveReload 敞开
 
 /* 设置为 0.0.0.0 则所有的地址均能拜访 */
 
 host: '0.0.0.0',
 
 port: 4000,
 
 // proxy: 'http://localhost:4000', // 通知开发服务器，将任何未知申请（没有匹配到动态文件的申请），都代理到这个 url 上，来满足跨域的申请
 
 },
 
 // configureWebpack: {
 
 //   plugins: [
 
 //     new webpack.ProvidePlugin({
 
 //       $:"jquery",
 
 //       jQuery:"jquery",
 
 //       "windows.jQuery":"jquery"
 
 //     })
 
 //   ]
 
 // },
 
}