vue-cli基础配置及webpack配置修改的完整步骤

src ：项目开发源文件

main.js ：打包编译的入口文件
App.vue ：项目页面的入口文件
components ：存放当前项目的公共组件

xxx.vue

assets ：一般存放项目中需要引入的静态资源文件

xxx.png
xxx.css

public

index.html ：当前项目的主页面，我们最后把所有在src中写的内容，通过webpack、vue编译渲染，最后呈现在index.html中的#app容器中
xxx.xx ：有些时候我们的某些资源可能要单独在index.html就引用了，将它放在此文件夹下，但是开发时除了这样的资源，其余的都建议放在src文件夹中

开发模式下我们基于下面这个命令，启动一个本地服务，把基于webpack编译后的内容预览

$npm run serve 或者 $yarn serve

生产模式下，把写好的内容进行编译打包，最后部署到服务器上

$npm run build 或者 $yarn build

vue-cli的其他命令

$vue inspect 查看当前项目默认的webpack配置信息
$vue add [plugin] 在当前项目中安装插件

$vue ui ：以图形化界面创建和管理项目

会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程

$vue create –help ：可以查看vue中的命令

vue-cli的一点深入

创建项目后，默认的配置中已经把，例如：less/sass 等规则配好，如果我们的项目中需要使用less等，无需配置规则，只需要安装对应的模块和加载器即可

$yarn add less less-loader -D
<script>
  impoer './xxx/xxx.xx' //=>导入需要的模块
</script>
<style lang="less">
  ...../
</style>

修改默认的webpack配置

需要在根目录中创建 vue.config.js 文件，在这个文件中修改相关配置，下面代码就是修改webpack的相关配置

  module.exports = {
//=>process.env.NODE_ENV：环境变量中存储的是开发环境还是生产环境
publicPath: process.env.NODE_ENV === 'production' ? 'http://www.xxx.cn/' : '/',
//=>outputDir
//=>自定义目录名称，把生成的JS/CSS/图片等静态资源放置到这个目录中
assetsDir: 'assets',								 
 2/3   首页 上一页 1 2 3 下一页 尾页