Vue项目搭建流程

1、全局安装脚手架

(1) 3.X版本

npm install ‐g @vue/cli // 回车 

(2) 低版本

npm install ‐g @vue/cli‐init // 回车 (推荐两者都安装，先安装新版本，再安装低版本)

2、检测是否安装成功

 vue ‐v (以上操作只执行一次即可)		

3、通过cmd创建项目文件夹

先通过命令行进入你想创建文件夹的目录，比如创建到e盘等根目录或者e盘中的某个文件夹

• (1) 3.X版本

    vue create hello‐world  (hello-world为自己项目名，请根据实际情况更改)

• (2) 低版本

vue init webpack hello‐world (hello-world为自己项目名，请根据实际情况更改)

• 1>、系统将提示您选择预设。可以选择基本Babel + ESLint设置附带的默认预设，也可以选择“手动选择功 能”以选择所需的功能
  (推荐选择第二个，手动选择)
• 2>、默认设置非常适合快速创建新项目的原型，而手动设 置提供了更多面向生产项目可能需要的选项。
  (推荐选择 Babel+Router+Linter/Formatter) (选择方法:空格即可)
• 3>、路由器是否使用历史回退模式

(推荐选择Y)

• 4>、 eslint语法选择:
  (推荐选择eslint+standard config:标准模式)

• 5>、保存方式
  (推荐选择第一个 lint on save)

• 6>、文件类型
  (推荐使用第二个json文件)

• 7>、保存预设以供未来使用
  (推荐Y)

• 8>、保存预设 (随便起名字)

4、项目配置

src下放置所有的资源文件

• (1)、assets文件夹下放静态资源文件，css样式，js文件， 字体文件，图片等，是要通过webpack打包的。
• (2)、static下放的是页面中引入的非打包的资源文件。
• (3)、cpmponents下放所有拆分了的组件，按目录来放 (即在此文件夹下创建文件夹，一个页面一个文件夹，每一 个新建的文件夹放置该页面拆分后的小组件)。
• (4)、pages是页面级组件放置的文件夹
• (5)、App.vue是根组件，用来配置路由和页面的跳转，以 及配置全局样式(全局样式文件在index.html文件里直接 引入)。
• (6)、main.js是入口文件。 .babelrc是配置es6转化的文件，不需要改动。 .editorconfig是编辑器配置相关的文件。 .gitignore是git文件，去掉了node_modules等不需要提 交的文件。
  更改配置
  1>、更改App.vue文件
  2>.更改main.js文件
  更改为:

 <template>
 <router‐view></router‐view> 
 </template>
 
new Vue({
 el: '#app',
 router,
 components: { App },
 template: '<App/>'
})

new Vue({
 el: '#app',
 router,
 render(h){
 return h(App)

(如果有语法报错，点左边红色灯泡，然后选择第一个然 后选择最后一个禁用eslint的检查)
3>.更改router.js文件

<template>
 <div id="app">
 <img src="/static/logo.png">
 <router‐view/>
 </div>
</template>

然后在此文件中引入自己写的各个页面级组件，在routes 的数组中添加自己的各个组件，path代表你在浏览器中访 问的路径,例如:paht:"/"代表访问根文件夹，可以自定义

5、启动方式

(1) 3.X启动方式:

npm run serve

(2) 低版本启动方式:

npm run dev

然后在相应的浏览器输入:

• (1)访问根目录
  http://localhost:8080/
• (2)访问根目录下的goods文件夹 http://localhost:8080/goods/ …
  (请注意端口号)