vue-cli(vue脚手架)相关内容

一、Vue-cl搭建前端工程化项目

1、先安装脚手架vue-cli，已集成webpack

cnpm install vue-cli -g

2、初始化项目

vue init webpack 文件名

• 1. Project Name：要创建的项目名称（该命令会生产一个package.json文件，文件中的name选项就是这个- - 2. ProjectName，默认为当前创建的项目目录名称，也可以自行制定（但是需要符合package.json中name命名规则，不要出现大写字母，空格，下划线，可以使用 - ）
• 3. Project Description：项目简介，也会出现在package.json文件中,可选
• 4. Author：作者，可选
     下一步直接回车
• 5. Install vue-router：是否安装vue路由组件，做项目的话一定要安装
• 6. Use ESLint to lint your code：是否需要使用ESLint模块进行代码检测
• 7. Setup unit tests with Karma + Mocha?：是否安装测试（单元测试）
• 8. Setup e2e tests with Nightwatch?：是否安装端到端的测试

完成上面步骤，over！
3、（生成文件目录后，使用 cnpm 安装依赖）

cnpm i

4、启动项目

npm run dev

二、Vue脚手架引入自己封装好的js。

• 1. 先上src里的js文件夹中新建一个js,可以命名为tool.js。

     
     
     image.png

• 2. 在tool.js里写我们要封装的函数，比如这里封装的是一个对当前页面网址获取参数的函数。

     
     
     image.png
• 3. 在vue组件中引入封装好的函数进行引用。

import {getUrlParams} from  '@/assets/js/tool.js'

image.png

三、Vue脚手架引入js插件

• 1. 以上传图片js插件为例子，把插件的文本复制到js文件夹下面。

     
     
     image.png

• 2. 使用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');