Vue脚手架安装教程（vue脚手架安装在哪）

本篇文章给大家谈谈Vue脚手架安装教程，以及vue脚手架安装在哪对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、VUE脚手架router安装,详解,二级配置,锚链接跳转
• 2、手把手 教你一步步--搭建vue脚手架，配置webpack文件
• 3、vue vue-cli脚手架 要先安装哪个？
• 4、Vue脚手架
• 5、vue 脚手架简单安装流程
• 6、如何安装vue-cli脚手架

VUE脚手架router安装,详解,二级配置,锚链接跳转

打开文件夹在路径栏里面输入cmd 打开cmd命令行

输入vue create router-pro

选择下面选项

按下键选择路由并回车：

选择vue2版本

问你是否使用路由的历史模式：

输入n

问你eslint的语法规范选择哪种？

我们选择第一个最基本的格式校验

下面问你什么时候校验语法规范？

我们选择保存的时候校验选择第一个

问是否采用最基本的校验更新到package文件？

默认选择第一个回车

问你是否配置好了？输入y

还会跳出一个选项你可以输入y 回车 也可以直接回车

/* 导入Vue构造函数 */

import Vue from 'vue'

/* 导入路由VueRouter构造函数 */

import VueRouter from 'vue-router'

/* 导入HomeView页面 */

import HomeView from '../views/HomeView.vue'

//调用构造函数Vue的use方法 传入VueRouter构造函数

//作用是把VueRouter作为一个插件 全局插入到Vue中

Vue.use(VueRouter)

/* 定义一个路由数组对象 */

const routes = [

  /* 一个对象就对应了一个路由

  path就是路由的地址

  name给路由起的名字

  component 具体跳转的页面

  */

  {

    /* path: '/' 根页面,表示已进入就显示的页面 */

    path: '/',

    name: 'home',

    /* 这种方式一进入页面就会全部加载,不是用到的时候再加载

       性能没有懒加载的方式好 */

    component: HomeView,

    /* 可以使用redirect 重定向 已进入主页就展示第一个子页面

     redirect 后面跟的是路径名 并不是name */

     /* 因为/是根路径 所有可以直接写one */

    redirect:'one',

    children:[{

      path:'one',

      name:'one',

      component: () = import('../views/OneView.vue')

    }]

  },

  {

    /* 这里是一级目录所以可以加/ 表示根目录 */

    path: '/about',

    name: 'about',

    // route level code-splitting

    // this generates a separate chunk (about.[hash].js) for this route

    // which is lazy-loaded when the route is visited.

    /* 懒加载功能 : 一开始不加载,当你切换路由的时候再加载 */

    component: () = import(/* webpackChunkName: "about" */ '../views/AboutView.vue'),

    /* about不是根路径 所以redirect后面要写全 '/about/aboutchild', */

    redirect:'/about/aboutchild',

    children:[{

      path:'aboutchild',

      name:'aboutchild',

      component: () = import('../views/AboutChild.vue')

    }]

  },

  {

    path:'/ChildA',

    name:'ChildA',

    component: () = import('../components/ChildA.vue')

  },

  {

    /* path:'*' 必须要放最后 */

    /* path:'*' 表示上面的路由没有匹配到 则进入下面的页面 */

    path:'*',

    name:'notfound',

    component: () = import('../components/NotFound.vue')

  }

]

/* 实例化构造函数 VueRouter 产生一个实例化对象

   并把上面的路由数组对象routes当作参数 以对象的方式传给构造函数 VueRouter*/

const router = new VueRouter({

  routes

})

/* 把实例化路由对象 router默认导出  */

export default router

/* 导入Vue构造函数 */

import Vue from 'vue'

/* 导入App.vue入口页面 */

import App from './App.vue'

/* 导入router文件夹中的index.js中的router实例化对象 */

/* 一个文件夹里面只有一个index.js文件在脚手架中可以把./router/index.js简写为./router  */

import router from './router'

/* 生产提示 */

/* 改成false是用来关闭开发者提示 */

Vue.config.productionTip = false

/* 在Vue的对象参数里面配置 el:"#app" 等于 .$mount('#app')

   都是用来挂载到id为#app的div上的*/

   /* 把路由实例化对象router配置在Vue中,作用是保证项目中

    所有的vue文件都可以使用router路由的属性和方法 */

new Vue({

  router,

  /* 会把所有vue文件渲染到App组件上 */

  render: h = h(App)

}).$mount('#app')/* 等同于 el:"#app" */

template

  div id="app"

    nav

      !-- router-link 组件是负责跳转的 to属性是用来写跳转路径的

          router-link组件本质上是有a标签来实现的 路由跳转的原理是根据

          锚点来的 --

      router-link to="/"Home/router-link |

      router-link to="/about"About/router-link |

      router-link to="/ChildA"点我跳转ChildA/router-link |

      router-link to="/ChildB"点我跳转ChildB/router-link |

    /nav

    !-- router-view 组件是用来展示组件的容器 --

    router-view/

    !-- 创建两个组件ChildA 和ChildB 并写两个 router-link 可以实现跳转

         组件显示在 router-view 容器中 --

  /div

/template

style

#app {

  font-family: Avenir, Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

}

nav {

  padding: 30px;

}

nav a {

  font-weight: bold;

  color: #2c3e50;

}

/* .router-link-exact-active 跳转链接被激活的时候加载到router-link身上 */

nav a.router-link-exact-active {

  color: #42b983;

}

/style

template

  div class="about"

    h1This is an about page/h1

    !-- to后面写的是路径 --

    !-- router-link to="/about/aboutchild"我是aboutchild/router-link --

    !-- to 后面要加: 作用是把后面解析成一个对象而不是字符串 --

    router-link :to="{name:'aboutchild'}"我是aboutchild/router-link

    !-- 二级路由显示的容器 --

    router-view/router-view

  /div

/template

template

  div

      h1AboutChild/h1

  /div

/template

script

export default {

}

/script

style

/style

template

  div class="home"

    h1KW47冲冲冲/h1

    router-link to="/one"ONEview/router-link

    !-- 二级路由对应的组件容器 --

    router-view/router-view

  /div

/template

script

// @ is an alias to /src

export default {

  name: 'HomeView',

  components: {

  }

}

/script

template

  div

      h1我是ONEVIwe/h1

  /div

/template

script

export default {

}

/script

style

/style

template

  div

      h1我是CHildA/h1

  /div

/template

script

export default {

}

/script

style

/style

template

  div

      h1我是ChildB/h1

  /div

/template

script

export default {

}

/script

style

/style

template

  div

      h1我是notfound/h1

  /div

/template

script

export default {

}

/script

style

/style

手把手 教你一步步--搭建vue脚手架，配置webpack文件

说明：配置后项目里面就多了package.json文件

安装好后package.json多了一行webpack指令

说明：这里和往后内容使用

cnpm是因为我本地安装淘宝镜像，用cnpm配置安装命令行更快

安装好后package.json多了一行webpack-dev-server指令

说明：配置好这条指令后就可以在命令板中输入npm run dev运行项目；在浏览器显示的地址是默认的 :8080/；如果不想要默认，可以改端口为：在package.json文件的scripts改dev为："webpack-dev-server --host 172.172.172.1 --port 8888 --open --config webpack.config.js"

在webpack.config.js配置以下内容：入口配置和出口配置

需要特别注意：dirname前面是有两横（我就设置了一条横线，导致报错，看似小问题，可这坑不小，因为没留意，都找不到这bug）

在index.html中设置以下内容：（需要把main.js入口文件引入index.html文件中）

输入npm run dev运行项目，下面显示命令行是成功调用：

调用成功后自动打开浏览器显示页面内容：端口默认为8080

在main.js文件里修改index.html文件里面的内容，再运行项目看看浏览器显示内容的变化情况：

因为配置webpack-dev-server的热更新功能，修改后浏览器会自动更新修改后的内容：（说明前面的命令行配置成功）

可以按f12，在浏览器的调试模式里查看到websocket

说明：生成目录dist中的main.js，这是个打包过程

已经生成dist目录的mainjs打包文件

配置css-loader命令行

配置style-loader命令行

配置css-loader/style-loader命令行后，在webpack.config.js配置文件里配置loader，增加对.css文件的处理

在项目目录下新建一个style.css文件

然后在main.js入口文件里面用import引入：

浏览器自动更新内容的字体样式（启动热更新功能）

此时可以在浏览器可以看到css是通过js动态创建style标签来写入的

配置插件后在package.json中有显示配置后的extract-text-webpack-plugin命令行

配置好插件后也需要修改webpack.config.js配置文件为以下内容：

最后在index.html中引入main.css文件（.vue为后缀的文件中的style样式都统一打包在main.css文件中）

需要配置以下的所有命令:例如需要用到.vue文件需要先安装vue-loader、vue-style-loader等加载器并做配置；要使用es6语法，需要安装babel和babel-loader等加载器（注意一条都不能配置漏，不然出现报错可能影响往后的运行与配置）：

配置好以上的命令行，package.json添加这些命令行

配置以上命令行后，在webpack.config.js配置文件中设置以下内容：

说明：vue-loader在编译.vue文件时，会对template、script、style分别处理，所以在vue-loader选项里多了一项options来进一步对不同语言进行配置，如在对css处理时，会先通过css-loader解析，然后把处理结果再交给vue-style-loader处理

把app.vue引入入口文件main.js：

浏览器自动更新显示：

在浏览器的调试模式中会看到div标签中出现属性data-v-xxx ，那是因为使用了style scoped，样式只作用本组件中；如果去掉scoped，div标签就没有data-v-属性，只是单纯的普通标签div文本数据/div

然后把这两个组件导入app.vue根组件中

配置后需要在webpack.config.js文件中配置test/loader

新建一个image文件夹放图片

在app.vue根组件里面加入img标签

浏览器自动更新显示

配置后在目录新建webpack.prod.config.js生产环境的配置文件（该文件在基本配置文件的基础上扩展）

配置打包依赖后在package.json文件里加入build的快捷脚本打包

补充说明：ejs是一个javascript模板库，用来从json数据中生成html字符串，常用于node.js

npm run build 打包后的静态资源main.css/main.js/jpg（css文件，js文件，图片）

附上github（配置后的项目demo）：

。。。终于完结，感觉码了好久（感谢大家阅读完到这里），以上的内容有不对或者不好地方，欢迎指出，往后还会更新有关vue-router和vuex的文章，希望分享的文章对大家有帮助！

vue vue-cli脚手架 要先安装哪个？

一般就是这样：

本人测试vue-cli，使用的各个工具的版本，分别是node6.95、webpack3.6.0、vue2.4.4。

第一步，安装node.js。

PS：我所使用的系统是win7的64位。

PS：检测node.js是否安装成功，在命令行中输入node -v即可。

第二步，安装cnpm。点击运行，输入cmd，执行命令：$ npm install -g cnpm --registry=。

PS：有的朋友可能安装cnpm不成功，如果不成功可以自行百度，寻找解决方案。如果不能解决，以后只能使用npm命令，npm命令执行效率会比较慢。

PS：检测cnpm是否安装成功，在命令行中输入cnmp -v即可。

第三步，安装webpack。执行命令：cnpm install webpack -g。

PS：同样的事使用webpack -v来检测webpack是否安装成功。

第四步，安装Vue。执行命令：cnpm install vue。

第五步，全局安装vue-cli。执行命令：cnpm install --global vue-cli。(此步可以忽视)

第六步，在开源处(即存放网站的地方)，执行操作：shift+右键，点击在此处打开命令窗口。

第七步，执行命令vue init webpack projectname(自定义项目名)或vue init webpack-simple projectname(自定义项目名)。

PS：本人使用的是webpack-simple。

第八步，等下载完以后，会提几个问题，如果需要，可以写上作者名字，其他都回车跳过或者y确认。(或按需添加)

第九步，执行命令cd projectname(自定义项目名) 定位到这里。

第十步，cnpm install安装依赖。

第十一步，npm run dev。

Vue脚手架

在没有Vue脚手架的时候，我们需要手动搭建webpack项目、手动去配置vue，现在有了Vue脚手架，我们就可以通过命令行的形式快速生成vue项目的基础架构。其官网地址为：

安装 3.x 版本的 Vue 脚手架。

输入 vue -V 如果出现版本号，就说明安装成功。

脚手架安装成功之后，就可以通过脚手架创建vue项目了。

通过上面脚手架创建的Vue项目，使用 npm run serve 命令之后，打印如下：

使用 npm run serve 命令并不会自动打开浏览器，下面我们修改端口号，并且让执行命令之后自动打开浏览器。

注意： 不推荐使用这种配置方式。因为 package.json 主要用来管理包的配置信息，为了方便维护，推荐将 vue 脚手架相关的配置，单独定义到 vue.config.js 配置文件中。

总结 ：至此，使用脚手架创建项目的流程就完成了，如果想要把项目拷贝给别人，需要先把项目的 node_modules 文件夹删除，对方拿到项目之后，首先要cd到项目目录，然后执行 npm install 安装所有依赖项，然后再执行 npm run serve 就可以把项目跑起来了。如果想要再给项目添加新的依赖，可以cd到项目目录，然后执行 vue ui 打开GUI，在可视化面板中就可以给项目添加新的依赖了。

vue 脚手架简单安装流程

能够显示版本号，说明环境已经安装好了。

注意：该命令需要在联网状态下执行才能成功。

这样一个简单的 vue 项目就建立完成。

项目文件结构如下图：

按照提示，打开浏览器输入地址：

最终结果如下：

到此，vue 脚手架搭建完毕，创建的一个测试项目也正常运行。

如何安装vue-cli脚手架

的vue-cli已经非常清楚明白咯。你只要利用npm进行安装vue-cli，之后：

vue init webpack (这里的三个点是你的项目命名);

然后他就自动的模版引擎，后面的东西可以根据它的提示进行后续操作，启动的话也是很简单的。

启动完成就是 npm install 安装依赖完了就 npm run dev。就可以了

关于Vue脚手架安装教程和vue脚手架安装在哪的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。