本文共 2347 字，大约阅读时间需要 7 分钟。

狂神视频

使用vue-cli搭建vue程序 https://www.bilibili.com/video/BV18E411a7mC?p=13

需要的环境

本人博客上面有Node.js 安装及更改目录介绍

https://blog.csdn.net/wei198621/article/details/116350962 本机的配置

-g就是全局安装

npm install cnpm-g

#或使用如下语句解决npm速度慢的问题

npm install --registry=https://registry.npm.taobao.org

C:\Users\wei19>npm config ls

… …

cache = “C:\repositories\nodeRepository\npm\cache”

prefix = “C:\repositories\nodeRepository\npm”

. Node.js : http://nodejs.cn/download/

安装就无脑下一步就好,安装在自己的环境目录下. Git : https://git-scm.com/downloads 镜像:https://npm.taobao.org/mirrors/git-for-windows/ 确认nodejs安装成功: . cmd 下输入node -v ,查看是否能够正确打印出版本号即可! . cmd下输入npm-v ,查看是否能够正确打印出版本号即可! 这个npm,就是一个软件包管理工具,就和linux下的apt软件安装差不多!

利用脚手架新建vue程序

1 基础环境准备

vue-cli

----  step 1  安装  vue-cliC:\Users\wei19>cnpm install vue-cli -g---- step 2  查看 vue-cli  可以创建哪几种项目 C:\Users\wei19>vue list  Available official templates:  ★  browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.  ★  browserify-simple - A simple Browserify + vueify setup for quick prototyping.  ★  pwa - PWA template for vue-cli based on the webpack template  ★  simple - The simplest possible Vue setup in a single HTML file  ★  webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.  ★  webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.

2 创建vue webpack 程序

---- step3  以管理员身份运行C:\workspace\workspace_front\vue\vue狂神>---- step 4   vue init webpack 项目名称 ---创建webpack版本vue C:\workspace\workspace_front\vue\vue狂神>vue init webpack myvue? Project name myvue? Project description A Vue.js project? Author wei198621 
   
    ? Vue build standalone? Install vue-router? No? Use ESLint to lint your code? No? Set up unit tests No? Setup e2e tests with Nightwatch? No? Should we run `npm install` for you after the project has been created? (recommended) no   vue-cli · Generated "myvue".# Project initialization finished!# ========================To get started:  cd myvue  npm install (or if using yarn: yarn)  npm run dev
   

3 安装必要的npm包

执行第二步的 vue init webpack myvue ，最后的提示就有 如下文字，找着做就可以了

进入新建的项目目录 本地为 C:\workspace\workspace_front\vue\vue狂神\myvue

执行  cnpm install   (国内要用cnpm install  ，前提，之前安装了cnpm )

To get started:  cd myvue  npm install (or if using yarn: yarn)  npm run dev

4 npm run dev 启动程序

5 设置IDEA以管理员身份运行npm 等指令

6 webpack 目录结构学习