使用vue-cli脚手架搭建基础项目框架

1、全局安装Vue-cli（使用npm，首先本地安装node）

　　运行命令： npm install --global vue-cli；

 

2、开始创建项目目录

　　运行命令：vue init webpack vueProject，

　　其中会填写一些信息（可以试着看懂中间出来的提示），项目名称、描述、作者自己写，

　　后面重要的是选择使用vue-router（一个基本的项目都需要用到），

　　没有使用ESlint（建议初学者暂时不要用），后面一直enter就行了，这样一个基本项目目录就搭建完成了; 

 

3、项目运行，

　　运行命令：npm install;

　　然后运行命令：npm run dev,之后在浏览器8080端口看到页面；

 

4、项目结构下载：

　　https://github.com/BarryCC/vue-project-topic/tree/master/vueProject;

 

项目目录内容简单描述，其中包含实际项目开发可能需要去修改配置的地方

1、bulid目录里面是运行环境和生产环境等操作配置文件，比如在运行npm run dev等命令时执行的就是这里的文件，

 其中的webpack.base.conf.js文件里面配置项目入口文件、输出口文件和module配置规则（后面将示例加入sass配置规则）；

2、config 目录包括配置文件执行文件需要的配置信息，其中index.js写主要的几点：

　　dev（开发运行环境）配置下，

　　　　① proxyTable：设置代理属性（用于接口发请求），

　　　　向本地服务器环境发送请求配置例如：

　　　　proxyTable: {
　　　　　'/api': {//可拦截没有规则的接口请求
　　　　　　target: 'http://localhost:8080',//一般本地运行例如Tomcat环境使用的是8080端口
　　　　　　changeOrigin: true,
　　　　　　}
　　　　}，

　　　　向服务器环境发送请求配置例如：（前后端分离）

　　　　proxyTable: {
　　　　　　'**': {
　　　　　　　target: 'http://192.168.1.251:8889/',//服务器地址
　　　　　　　changeOrigin: true,
　　　　　　　filter: function(pathname) {
　　　　　　　　return pathname.match('^/dsp');//接口过滤
　　　　　　　}
　　　　　　}
　　　　}，

　　　　② port：设置端口号，express服务的；

　　　　③ autoOpenBrowser：制动打开浏览器，默认是false，个人比较喜欢打开true；

　　build（打包环境）配置下：

　　　　① assetsRoot：打包生成文件的放置目录，可根据项目环境变换，不改变情况下打包完成后会在项目目录下生产一个diss文件夹；

　　　　② assetsPublicPath：默认使用的是绝对路径（'/'），一般部署到服务器使用的是相对路径（'./'），

　　　　　（注：当使用相对路径（'./'）的时候，为了让项目icon和背景图片正常显示，将build目录下的utils.js配置中，

　　　　　　use: loaders,fallback: 'vue-style-loader',配置下方添加配置" publicPath:'../../' "）；

 

3、src 资源文件目录，项目中的组件模块(components)以及静态文件夹(assets)，还有安装的路由（router）、状态管理（vuex）和main.js文件，

　　components：存放项目公共组件，每一个组件一个文件夹；assets：存放img、style、font等静态文件，最好分做文件夹；utils：存放个人封装的API方法；

 

4、.gitignore文件，将项目开发中可以忽略提交到SVN或git的文件写到该配置中；

 

5、package.json文件

　　scripts：npm run 命令执行名称，run和start是运行项目命令，build是打包命令；

　　dependencies和devDependencies：

　　　　前者生产环境下所需要的插件例如vue、iview、echarts等，

　　　　后者是开发运行环境下的插件配置例如babel、热加载等；

 

转载于:https://www.cnblogs.com/CCLlog/p/8649071.html