vue尚硅谷外卖(2)-vue-cli搭建项目

安装

1. 安装vue-cli。
   npm install -g vue-cli -g为全局安装
2. 新建一个空文件夹，进入该文件夹。
3. 初始化一个项目。
   (1) vue init webpack [test]。 test可写可不写，不写就是在当前空目录下生成项目，加上就是在test目录下，多了一级目录。
   (2)而后会出现问答选项，按照需求选择yes/no
   Project name：这个是项目名称，默认是上一步输入时的那个名称，想改的话直接输入修改，也能够直接回车
   Project description：项目描述，能够编辑或者直接回车
   Author (): 做者
   Runtime + Compiler: recommended for most users: 运行加编译，既然已经说了推荐就直接回车 Runtime-only: 仅运行
   Install vue-router:是否须要vue-router，这里回车选择使用，这样生成好的项目就会有相关的路由配置文件
   Use ESLint to lint your code:是否使用ESLint，Eslint能够检查代码规范，咱们应该养成使用Eslint写代码的好习惯，因此也是直接回车，默认使用，这样会生成相关的ESLint配置。固然若是以为Eslint太严格也能够选择n
   Setup unit tests with Karma + Moch?: 是否安装单元测试。因为项目尚未单元测试，因此选择n
   Setup e2e tests with Nightwatch：是否安装e2e测试，一样也选择n
   其实这几个选择选择yes/no影响不大，选择yes就会默认生成相关配置，选择了n后续也能够手动安装，没有太大影响。
4. 安装完成后运行 npm run dev,弹出浏览器窗口，看到欢迎页面则代码安装成功

项目结构

安装完成后就会生成一个vue项目，项目结构如图所示：

在开发过程种，主要是修改src种的代码，偶尔也须要更改build里的配置文件。src种有个assets文件夹存放资源文件，同时根目录下也有个static存放静态资源，现区分一下两个文件夹的不一样之处。

static与assets的区别

首先，存放在assets里的资源是会通过webpack打包处理，只支持相对路径。因此assets里面应该放置一些咱们本身写的js/css代码或者图片，须要压缩或者变更的资源。
而static里存放的资源不会被webpack打包，而是直接复制到打包后的项目中，默认在/dist/static中，必须使用绝对路径来引用这里面的资源。因此,static里应该存放第三方的代码，一般已经被压缩过了，或者不会改动的资源，如reset.css。