Vue单文件组件环境配置

单文件组件不能直接运行使用，需要依赖node项目对其进行解析打包，在使用之前需要先进行环境配置

安装node版本管理工具nvm

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
// 更新配置
source .bashrc

安装最新版本的node

【通过 node -V 来查看是否已经安装，这行命令在任何地方都可以执行】
1. ```
nvm install node
```

更新npm的安装源

npm config set registry https://registry.npm.taobao.org

创建项目目录
1. ```
mkdir project
```
进入项目目录，初始化项目目录
1. ```
cd project
npm init
```
2. 初始化完成后在当前目录中会生成一个package.json文件，该文件指定项目所以依赖的模块

配置package.json文件【用以下内容替换默认的内容，在项目中打开后再替换】

{"name": "project","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack"},"keywords": [],"author": "","license": "ISC","dependencies": {"babel-core": "^6.22.1","babel-loader": "^7.1.1","babel-preset-env": "^1.3.2","babel-preset-stage-2": "^6.22.0","babel-register": "^6.22.0","css-loader": "^0.28.11","element-ui": "^2.7.2","file-loader": "^1.1.4","lodash": "^4.17.4","style-loader": "^0.23.1","url-loader": "^1.1.2","vue": "^2.6.10","vue-loader": "^15.7.0","vue-router": "^3.0.2","vue-style-loader": "^3.0.1","vue-template-compiler": "^2.5.2","webpack": "^4.29.6","webpack-cli": "^3.3.0","webpack-dev-server": "^3.2.1"}
}

g该文件定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install 命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。

安装项目依赖模块【在VSCode中就可以执行此命令】
1. ```
npm install
```
创建项目文件 main.js ,index.html, App.vue
1. ```
touch index.html main.js App.vue. 可以借助vscode编辑工具创建文件
```
2. index.html文件时项目的首页文件
3. main.js 文件定义vue及调用单文件组件，也是项目打包时所依赖的文件
4. App.vue文件为单文件组件文件

创建webpacke打包的配置文件webpack.config.js 【在VSCode中下载Vetur插件来对此进行智能提示】【此配置文件是需要手动新建的，把下面的这些配置放到新建的文件中】

const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin');module.exports = {entry: { main: "./main.js" }, //入口文件output: {filename: 'index.js', //出口文件名path: path.resolve(__dirname), //当前目录library: 'index' // 打包后模块的名称},plugins: [// make sure to include the plugin for the magicnew VueLoaderPlugin()],module: {rules: [ //定义不同类型的文件使用的loader{test: /\.vue$/,loader: 'vue-loader'},{test: /\.js$/,loader: 'babel-loader'},{test: /\.css$/,loader: 'vue-style-loader',},{test: /\.css$/,loader: 'css-loader',options: {minimize: true //添加}}, {test: /\.(eot|svg|ttf|woff|woff2)$/,loader: 'file-loader'},]}
}

在通过webpack对项目进行打包时，需要指定相应的配置文件，同过配置文件对单文件组件中的各个内容进行解析，生成一个index.js的压缩文件，在index.html只需引该文件就可进行页面加载渲染

目录创建完成后结构如下

Vue单文件组件环境配置相关推荐

Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue
Vue 单文件组件传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...
vue单文件props写法_详解Vue 单文件组件的三种写法
详解Vue 单文件组件的三种写法 JS构造选项写法 export defaul { data, methods, ...} JS class写法 @Component export default c ...
Vue单文件组件与vue-loader
单文件组件 Vue.js是一个渐进式的js框架,在使用wewbpack构建Vue项目时,可以使用一种新的构建模式: .vue单文件组件. 就是一个后缀名为.vue的文件,在webpack中使用vue- ...
vue使用脚手架的单文件组件环境搭建
每一次新下载配置一个新的东西都会出现各种奇奇怪怪的问题,配置好几次,以此记录. 组件把一个页面拆分成一堆组件,每个组件都有自己的html.css 作用:简化项目编程,复用编码,提高运行效率单文件组 ...
什么Vue单文件组件（SFC）?
介绍# Vue 的单文件组件 (即 *.vue 文件,英文 Single-File Component,简称 SFC) 是一种特殊的文件格式,使我们能够将一个 Vue 组件的模板.逻辑与样式封装在单个 ...
Vue单文件组件基础模板
背景相信大家在使用Vue开发项目时,基本都是以单文件组件的形式开发组件的,这种方式好处多多: 1.代码集中,便于开发.管理和维护 2.可复用性高,直接将vue文件拷贝到新项目中我暂时就想到这两点, ...
Vue单文件组件的使用
项目搭建完成后需要分别对 main.js , index.html , App.vue 文件进行编写代码 index.html <!DOCTYPE html> <html lang= ...
vue单文件组件导入导出
目录分析打开项目,依次分析下目录结构,项目目录结构如下项目目录结构如下单文件组件.vue 目完成后,我们看到src 目录下有一个componets 目录,里面有一个 HelloWorld.vue ...
在Vue单文件组件的template标签上使用v-if不生效的原因
今天晚上,我在某个组件里看到了这样一段代码,简化来讲,大概长这样: // Child.vue <template v-if="false"><div>Foo ...

Vue单文件组件环境配置

Vue单文件组件环境配置相关推荐

最新文章

热门文章