使用vue-cli搭建vue程序

狂神视频
使用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-cli
C:\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 <[email protected]>
? 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 目录结构学习