43、前端基础-Vue-使用Vue脚手架进行模块化开发

最新推荐文章于 2024-05-11 07:40:01 发布

zouxuhang

最新推荐文章于 2024-05-11 07:40:01 发布

阅读量340

点赞数 1

分类专栏：谷粒商城

本文链接：https://blog.csdn.net/zouxuhang/article/details/108017877

版权

谷粒商城专栏收录该内容

65 篇文章 8 订阅

订阅专栏

1.Vue CLI中文官网

2.全局安装webpack

npm install webpack -g

3. 全局安装vue 脚手架

npm install -g @vue/cli

用这个命令来检查其版本是否正确：

vue --version

npm install -g @vue/cli-init

4.vue脚手架使用webpack模板初始化一个项目

$ vue init webpack vue-demo

? Project name (vue-demo)
? Project name vue-demo
? Project description (A Vue.js project)
? Project description A Vue.js project
? Author (hang <zouxh_java@163.com>)
? Author hang <zouxh_java@163.com>
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n)
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n
? Use ESLint to lint your code? No
? Set up unit tests (Y/n) n
? Set up unit tests No
? Setup e2e tests with Nightwatch? (Y/n)
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recom
? Should we run `npm install` for you after the project has been created? (recom
mended) no

   vue-cli · Generated "vue-demo".

# Project initialization finished!
# ========================

To get started:

  cd vue-demo
  npm install (or if using yarn: yarn)
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

5.运行项目

npm install
npm run dev

访问http://localhost:8080

6.vue-demo项目，内容介绍

build：打包工具webpack相关
config:配置信息，比如端口（config/index.js）
node_mode:项目安装的所有依赖（npm install）
src:编写代码文件夹
static:静态文件夹，可以存放图片
.babelrc:
.editorconfig:
.gitignore:
.postcssrc.js
index.html：首页内容
package.json:依赖信息
package-lock.json:依赖详细信息，版本号、去哪里下载等等
README.md:

7.项目运行过程

1.index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue-demo</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

2.src/main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({//创建实例
  el: '#app',//挂载index.html的app元素
  router,//路由相关，导入./router文件夹下的内容
  components: { App },//使用组件app,上面导入进来的
  template: '<App/>'// 如何渲染，模板使用了app组件
})

8.自定义一个组件

1.components下创建Hello.vue

<template>
    <div>
        <h1>你好，Hello，{{name}}</h1>
    </div>
</template>
 
<script>
export default {
    data(){
        return{
            name: "vue"
        }
    }
}
</script>
 
<style>
 
</style>

2.vue router

html添加

<!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/Hello">去hello</router-link>
    <router-link to="/">去首页</router-link>

JavaScript

{
      path: '/Hello',
      name: 'Hello',
      component: Hello
    }

9.问题

1.error Failed at the chromedriver@2.46.0 install script.

npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

2.Module build failed: Error: ENOENT: no such file or directory, scandir ‘D:\0code\node_modules\node-sas’
1.cd 进入node_modules
2.运行npm rebuild node-sass
最后直接运行代码就OK了

zouxuhang

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
43、前端基础-Vue-使用Vue脚手架进行模块化开发

1.Vue CLI中文官网2.全局安装webpacknpm install webpack -g3. 全局安装vue 脚手架npm install -g @vue/cli用这个命令来检查其版本是否正确：vue --version4.vue脚手架使用webpack模板初始化一个项目vue init webpack vue-demo5.运行项目npm run dev访问http://localhost:80806.vue-demo项目，内容介绍build：打包工具webpac
复制链接

扫一扫

专栏目录