5.Vue

小Pawn爷

已于 2023-11-12 10:33:56 修改

阅读量265

点赞数

分类专栏： 10.前端文章标签： vue 前端框架

于 2022-09-06 07:39:40 首次发布

本文链接：https://blog.csdn.net/weixin_44689630/article/details/126716856

版权

10.前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

1.环境

1.安装NPM(Node Package Manager Node包管理工具)

windows:直接下载NPM
linux:

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

2.配置镜像

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

3.安装cnpm

#-g：全局安装。将会安装在C:\Users\Administrator\AppData\Roaming\npm
npm install -g cnpm

4.安装vue

cnpm install vue

注意:

报错

Install fail! Error: EPERM: operation not permitted, mkdir 'D:\soft\soft_work\nodejs\node_modules\_vue@3.2.38@vue'
Error: EPERM: operation not permitted, mkdir 'D:\soft\soft_work\nodejs\node_modules\_vue@3.2.38@vue'
npminstall version: 6.5.1
npminstall args: D:\soft\soft_work\nodejs\node.exe C:\Users\Jason\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\bin\install.js --fix-bug-versions --china --userconfig=C:\Users\Jason\.cnpmrc --disturl=https://npmmirror.com/mirrors/node --registry=https://registry.npmmirror.com vue

解决办法

第一种：选择管理员身份运行命令行
第二种：node安装目录下设置users用户完全控制权限

2.通过vue-cli创建项目

Vue CLI 是一个基于Vue.js 进行快速开发的完整系统的脚手架

1.全局安装vue-cli

cnpm install --global vue-cli

使用vue-cli需要去github下载webpack-develop ,因为国内访问github会访问超时,所以需要事先下载好,否则会报错如下

vue-cli · Failed to download repo vuejs-templates/webpack: Response code 404 (Not Found)

下载好,将webpack-develop解压到C:\Users\你的用户名\.vue-templates目录,并将解压后的webpack-develop改为webpack,然后执行如下命令

vue init webpack 项目名

3.运行调试项目

// 进入项目目录下，执行下面指令
cnpm run dev

4.项目打包

cnpm run build

项目目录结构如下

在这里插入图片描述

文件夹1(src)，主开发目录，要开发的单文件组件全部在这个目录下
- 文件夹1.1(components),组件目录,vue格式的单文件组件都存在这个目录中
- 文件夹1.2(router),路由目录,在此文件夹中配置组件路由
文件夹2(static)，静态资源目录,所有的css,js文件放在这个文件夹
node_modules目录是node的包目录
config是配置目录
build是项目打包时依赖的目录
package.json文件,该文件指定项目所以依赖的模块使用npm install

在这里插入图片描述

整个项目是一个主文件index.html,index.html中会引入src文件夹中的main.js,main.js中会导入顶级单文件组件App.vue,App.vue中会通过组件嵌套或者路由来引用components文件夹中的其他单文件组件

3.通过手动创建项目

1.创建项目

mkdir project
cd project

2.初始化项目目录

npm init

3.初始化项目后,给生成的 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"
    }
}

4.安装项目依赖

cnpm install

5.创建项目的首页文件vi index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id='app'><App></App></div>

    <!-- 引入打包后的index.js文件。该文件的名字不是固定名字，可以在webpack.config.js的出口文件中指定 -->
    <script src="./index.js"></script>
</body>
</html>

6.创建App.vue文件,以及子组件Child1.vue,Child2.vue

<template>
    <div>
        单文件组件
         <!-- 记载路由标签 -->
        <router-view></router-view>
    </div>

</template>

<script>
</script>

<style>
</style>

Child1.vue

<template>
    <div>子组件1</div>
</template>

<script>
// export default {

// }
</script>

<style>

</style>

Child2.vue

<template>
    <div>子组件2</div>
</template>

<script>
// export default {

// }
</script>

<style>

</style>

7.创建路由文件mkdir router && vi router.js

import Vue from 'vue'
// 导入路由插件
import Router from 'vue-router'
import Child1 from '../components/Child1.vue'
import Child2 from '../components/Child2.vue'
// 在vue中使用插件
Vue.use(Router)
export default new Router({
    // 定义匹配规则
   routes:[
       {
           path:'/',  // 匹配根路径／，加载Chiled1中的内容
           component:Child1
       },
       {
           path:'/child2',
           component:Child2
       }
   ]
})

8.创建main.js文件

import Vue from 'vue'
import App from './App.vue'
//导入定义好的路由
import router from './router/router.js'

new Vue({
    el:'#app',
    router,  //使用路由
    render:function(creater){
        return creater(App)
    }
})

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

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 magic
        new 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'
              },
        ]
    }
}

ERROR in Entry module not found: Error: Can't resolve './src' in 'E:\项目\前端项目\test_vue3'

ERROR in multi ./node_modules/_webpack-dev-server@3.11.3@webpack-dev-server/client?http://localhost:8080 ./src
Module not found: Error: Can't resolve './src' in 'E:\项目\前端项目\test_vue3'
 @ multi ./node_modules/_webpack-dev-server@3.11.3@webpack-dev-server/client?http://localhost:8080 ./src main[1]
i ｢wdm｣: Failed to compile.

ERROR in ./router/router.js
Module not found: Error: Can't resolve '../components/child1' in 'E:\项目\前端项目\test_vue3\router'
 @ ./router/router.js 3:0-42 10:19-25
 @ ./main.js

ERROR in ./router/router.js
Module not found: Error: Can't resolve '../components/child2' in 'E:\项目\前端项目\test_vue3\router'
 @ ./router/router.js 4:0-42 13:19-25
 @ ./main.js

10.项目打包

npm run build

11.项目调试运行

./node_modules/.bin/webpack-dev-server #npm run dev

4.live-server实现前端开发预览

安装最新版本的node.js- 提供的服务器live-server作为前端开发服务器使用
安装node.js的版本控制工具nvm

在安装live-server之前，你需要卸载任何现有版本的node.js。并且需要删除现有的nodejs安装目录

一:安装nodejs:
1.下载nodejs:http://nodejs.cn/download/ 建议选择node-v10.16.2-x64稳定版
2.安装路径选择: D:\dev\nodejs 与安装nodejs的快捷方式存放的目录一致

二:安装live-server
1.在命令端输入:npm install -g live-server

三:安装vm
1.下载nvm https://github.com/coreybutler/nvm-windows/releases

2.安装nvm :

2.1. 设置nvm的安装路径：D:\dev\nvm
2.2 设置nodejs的快捷方式存放的目录：D:\dev\nodejs
2.3进入nvm安装目录修改配置文件C:…\nvm\settings.txt，用记事本打开添加：

npm install -g cnpm --registry=https://registry.npm.taobao.org 	
npm install -g cnpm--registry=http://r.cnpmjs.org

3.检测

3.1检查是否安装成功，我们可以在新的命令窗口中输入vm ,如果出现nvm版本号和一系列帮助指令，则说明nvm安装成功。

nvm ls   // 查看目前已经安装的版本
nvm install 6.10.0  // 安装指定的版本的nodejs
nvm use 6.10.0  // 使用指定版本的nodejs

小Pawn爷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
5.Vue

整个项目是一个主文件index.html,index.html中会引入src文件夹中的main.js,main.js中会导入顶级单文件组件App.vue,App.vue中会通过组件嵌套或者路由来引用components文件夹中的其他单文件组件。9.创建webpacke打包的配置文件webpack.config.js, 需要指定相应的配置文件,同过配置文件对单文件组件中的各个内容进行解析，生成一个index.js的压缩文件，在index.html只需引该文件就可进行页面加载渲染。8.创建main.js文件。
复制链接

扫一扫

专栏目录