vue cli 地址栏有变化而页面不变_vue项目搭建流程

vue作为一款渐进式js框架，简单、易上手，使得很多公司在项目中都会应用到，那么熟练掌握vue也是必须具备的一项技能。先来看下vue项目的搭建流程吧(基于vue cli3，vue cli2作为旧版本不推荐使用)

• 安装node，配置环境变量(主要用于使用npm启动项目，安装依赖等)

安装包官网下载地址： https://nodejs.org/zh-cn/ (推荐使用长期LTS版，长期支持，稳定)。 注意下载的位数，默认是win10的64位，下载mac，win7，32位等可点击官网顶部的下载。直接一直下一步安装即可，可以更改安装路径，但还是建议默认路径安装。node安装包安装完自带node js的配置，只需配置npm的变量即可。

• 全局安装vue cli脚手架(全局安装，且仅安装一次即可)

npm install -g @vue/cli 

• 安装项目(cmd命令行运行)

因为vue cli把webpack的配置集成到了底层，所以安装后并不会看到webpack的配置，不过想要修改某些也是有对应方法的，后文我们会介绍

vue create 项目名

• 安装步骤

①、提示需要采取默认配置(babel+eslint)还是自己选择需要安装的配置(这里我们选择了自主选择安装的配置)

②、上下键指定到对应的配置，通过 空格 选择要安装的配置，选择完毕后，回车执行下一步(可根据自己需求安装，后期有需要也可以额外安装)

③、是否使用history模式的路由(默认是hash模式，地址栏会带 #号，而history模式地址栏不会额外附带 #号)

④、需要采取的eslint格式化配置(根据个人需要选择，不同配置存在不同的格式化，这里我选择了prettier的配置)

⑤、eslint检测的时机(保存后检测、保存后检测并且提交后检测修复)

⑥、配置文件所放的地方(config文件、packge.json文件)(推荐使用json文件)

⑦、是否需要把当前所有的配置最为预设，以供下次选择(相当于把当前的配置最为记录，下次可以直接采取当前选择的配置)

最后耐心等待安装完成，就可以启动项目了。

启动步骤：项目根目录中，运行以下命令，然后根据提供的地址直接访问即可

npm run serve

• 项目目录介绍：

public文件夹放置着我们一些静态文件以及配置，当我们打包后还需要保留的配置文件可以考虑放在这里；

assets文件夹可以放置我们一些资源文件(如：图片、css样式、js文件等)，打包后进行编译压缩，不会保留原始文件；

components文件夹放置一些组件，比如我们可以把一些模块抽取为组件，可供其他页面使用；

router文件夹放置着整个项目的路由配置；

store文件夹是vue项目的整个公共仓库，也就是所谓的vuex，可集中管理一些值，提供所有地方使用；

views文件夹放置着一些页面级组件，也就是我们界面上看到的各个页面，路由配置中需要配置这些页面；

packge.json文件中有我们安装的所有依赖目录，当我们把项目上传到某个地方(如git上)，别人可以根据这个文件直接安装依赖，而不需要每次都拷贝node_modules文件夹；

前文也提到了：因为webpack被集成到了底层，当我们需要修改webpack的配置时，应该怎么做？我们需要在项目的根目录下创建一个名为'vue.config'的js文件，可在里面修改自己需要的webpack配置，它最终会覆盖底层的对应配置，使得我们设置的配置生效(不过需要注意的是，修改完配置记得重启项目)

好了，项目至此就搭建配置完成了，现在就开始着手自己的项目开发吧。

期待能够对你有所帮助~~~