一、Vue-cl搭建前端工程化项目
1、先安装脚手架vue-cli，已集成webpack
cnpm install vue-cli -g
2、初始化项目
vue init webpack 文件名
- Project Name：要创建的项目名称（该命令会生产一个package.json文件，文件中的name选项就是这个- - 2. ProjectName，默认为当前创建的项目目录名称，也可以自行制定（但是需要符合package.json中name命名规则，不要出现大写字母，空格，下划线，可以使用 - ）
- Project Description：项目简介，也会出现在package.json文件中,可选
- Author：作者，可选
下一步直接回车
- Author：作者，可选
- Install vue-router：是否安装vue路由组件，做项目的话一定要安装
- Use ESLint to lint your code：是否需要使用ESLint模块进行代码检测
- Setup unit tests with Karma + Mocha?：是否安装测试（单元测试）
- Setup e2e tests with Nightwatch?：是否安装端到端的测试
完成上面步骤，over！
3、（生成文件目录后，使用 cnpm 安装依赖）
cnpm i
4、启动项目
npm run dev
二、Vue脚手架引入自己封装好的js。
-
先上src里的js文件夹中新建一个js,可以命名为tool.js。
image.png
-
-
在tool.js里写我们要封装的函数，比如这里封装的是一个对当前页面网址获取参数的函数。
image.png
-
- 在vue组件中引入封装好的函数进行引用。
import {getUrlParams} from '@/assets/js/tool.js'
image.png
三、Vue脚手架引入js插件
-
以上传图片js插件为例子，把插件的文本复制到js文件夹下面。
image.png
-
-
使用js插件，先import引入。
image.png
-
四、Vue跳转新打开一个页面窗口
// name后面跟着路由名称，query后面跟着参数对象。
let routeData = this.$router.resolve({ name: 'printPage', query: {loading: this.loading} });
// 然后用winow.open打开
window.open(routeData.href, '_blank');
