Vue支架的简单应用示例

提前申报

注意：很多关于vue脚手架的东西和理解都是具象的，而不是专业和官方的

工具

一个可以将css和js压缩成一个文件的项目构建工具。此外，可以提供测试服务器。使用webpack时，您可以配置一些默认扩展名和路径别名，以便在项目文件中直接使用

进出口

使用export命令导出一个JS对象，其他JS文件可以从path以导入对象名称的形式导入到这个对象中，但是导入的时候一定要知道导入导出对象的名称。如果使用export default命令导出对象，其他JS文件在导入时不需要知道导出对象的名称，可以自定义对象名称

Ps:导出和导入是es6规范中的关键词，目前只有少数JS运行平台实现，在脚手架中会被巴别塔自动转换成es5对应

语法组件中自定义标签名的大小写问题

大多数浏览器解析HTML时，标签不区分大小写。自定义标签中的大写字母会自动转换为小写字母，例如，First/First会转换为First标签，这将导致与注册时提供的标签名称不一致，从而导致组件注册不正确的错误。

如果在使用自定义组件时代码是写在模板标签中的，那么在解析时它将被解析为JS，这是区分大小写的。

编写组件的另一种方法

bodytemplate id='first-c '！- template是组件的HTML模板，仍然只能有一个根标签- div这是我的第一个组件/div/template div id=' app ' first/first/div script var my template={ template 3360 ' # first-c ' } vue.component(' first '，my template)；var app=new Vue({ El : ' # app ' })；/script/body使用脚手架创建一个安装NodeJS的项目

脚手架的安装和操作依赖于节点。您可以在命令行上键入node -v来查看是否安装了NodeJS。

下载节点

配置npm全局路径

第一个路径在NPM配置集前缀‘d : \ nodejs \ node _ global’NPM配置集缓存‘d : \ nodejs \ node _ cache’之后同时配置到环境变量路径中。

配置淘宝npm镜像

https://registry.npm.taobao.org NPM配置集注册表

安装vue-cli

从命令行执行npm install -g vue-cli。

创建模板项目

//vue init模板名称项目名称vue init webpack简单模板名称可以在https://github.com/vuejs-templates,查看，建议使用webpack。

然后使用cd项目名称进入项目根目录，并使用npm install自动安装项目依赖项。

其他常用命令

在项目的根目录中执行npm run dev以测试和运行项目，并执行npm run build以将项目正式编译到dist目录。

目录结构

单文件组件

模板！- template是组件的HTML模板，仍然只能有一个根标签- div我是单文件组件/div/templatescriptordefault {//不需要写模板，数据仍然作为函数返回，其他属性和data()相同{ return { }，props: []，methods : { }/script！-这个作用域允许这些样式只在当前组件样式作用域/样式补充中生效：在Vue支架中使用jquery和其他框架

安装jquery npm在项目的根目录下安装jquery(注意大小写，jQuery与jQuery不同)。

生成目录下的Webpack.base.conf.js

在开头添加

Const web pack=require ('web pack ')最后添加的module.exports(注意JS代码格式，别忘了写逗号)

在plugins :[new web pack]之后。provide plugin({ jquery : ' jquery '，$:' jquery'})]，您需要将juery导入到使用jquery的组件中，例如

脚本从“jquery”导入$ export default { data(){ return { users 3360 null } }，created(){ $。get(' http://127 . 0 . 0 . 1:3000/all _ user '，函数(数据){ this.users=data}.bind(this))} }/script使用其他js框架的方法链接

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。