vue-cli搭建vue项目(单页面应用)

1.全局安装vue-cli

2.创建项目:

vue init webpack test

test是项目名称,会在当前工作目录下新建一个test文件夹

接下来会手动选择一些配置

除了Setup unit tests with Karma + Moch?和Setup e2e tests with Nightwatch两个测试选项选择no,其他都选择默认即可

3.执行init完毕后,会自动生成项目,安装vue项目必要和常见的loader,插件等

4.项目目录结构:

  • build 文件夹:用于存放 webpack 相关配置和脚本(默认情况下,webpack使用根目录下的webpack.config.js,但是其实可以使用任何目录下的任意名字的js配置文件,取决于package.json),package.json有这样的配置:
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
  "build": "node build/build.js"----build.js引用了webpack.prod.conf.js
  webpack.prod.conf.js和webpack.dev.conf.js都引用了webpack.base.conf.js,在webpack.base.conf.js配置的在prod和dev
  中都有效
 
  • config文件夹:用于配置一些webpack需要用到的参数,比如webpack配置文件夹中的输出目录:

 

  output: {
    path: config.build.assetsRoot,
        ......
  }

  assetsRoot在config下配置文件可以找到对应的值:

      assetsRoot: path.resolve(__dirname, '../dist'),

      输出目录配置在config上一层(工程根目录)下的dist文件夹下

  • src文件夹

  这个文件夹是整个项目最主要以及使用频率最高的文件夹。

  “assets”: 共用的样式、图片

  “components”: 业务代码存放的地方,里面分成一个个组件存放,一个页面是一个组件,一个页面里面还会包着很多组件

  “router”: 设置路由

  “App.vue”: vue文件入口界面

  “main.js:对应App.vue 创建vue实例,也是入口文件,对应webpack.base.config.js里的入口配置

也可以在里面增加新建目录和文件

  •  static目录:

  静态资源目录,放在这个目录下的文件不经过loader直接可以使用,比如在static下新建img目录存放图片

      使用的时候(没进过loader,当前路径是项目根目录):

  <img src="/static/img/logo2.png">

      src/assets下面也可以存放图片,使用loader加载,引用的时候以当前vue文件为基准目录,比如在app.vue中:

  <img src="./assets/bg_student.png">

     如果这两个图片文件都加载了,会在dist/static/img下放入这两张图片(assets下的图片大于limit限制才会放入,否则  

     base64写入文件)

原文地址:https://www.cnblogs.com/cowboybusy/p/10619683.html