通过命令创建vue项目（ 0 - 1 多种方法）

环境要求： 安装有 Node.js、 vue、 vue-cli 。

node下载地址https://nodejs.org/en/

查看nodejs版本和npm版本，在命令行中输入：

node -v
npm -v　

npm更新到最新的版本

npm install -g npm

淘宝 NPM 镜像，大家都知道国内直接使用npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像

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

vue-cli安装

npm install vue-cli -g   //全局安装 vue-cli

vue-cli的版本查看

vue -V

vue-cli的3.0+以后使用的不是vue-cli了，如果用以上的安装命令安装的并不是最新版的3.0+的，而如果安装3.0的话就需要使用新的

npm install @vue/cli -g

如果原来已经安装了vue-cli的话需要先卸载原来的安装

npm uninstall vue-cli -g

创建项目：

一 创建VUE项目

 1. 使用vue-cli脚手架创建新vuejs项目
	    vue init webpack projectName   //使用vue初始化基于webpack的新项目
	    cd projectName  //进入项目 
	    npm install 或者 cnpm install  //下载依赖：（进入项目一定要切换到项目路径）
	    npm run dev     //运行项目：
 2. 使用vue create命令创建vue项目
		vue create hello-world
		cd hello-world
		npm run serve  // 运行  http://localhost:8000
 3. 使用vue cli3的ui命令基于图形用户界面创建vuejs项目
		在命令行窗口中输入命令vue ui创建vuejs项目
		vue ui //  自动运行图形页面 http://localhost:8000
 4. 使用vite+vue3.0搭建项目
		A:  yarn global add create-vite-app@1.18.0  //全局安装create-vite-app
		B:  cva vue3-ui	 或者  create-vite-app vue3-ui//创建项目目录
		C:  yarn dev   //运行项目
        D:  npm info vue-router versions      //查看vue-router所有版本号
            yarn add vue-router@4.0.0-beta.6  //安装最新的vue-router@4.0.0-beta.6
		E:   import {createWebHashHistory, createRouter} from 'vue-router'  //初始化vue-router
			1):   const history = createWebHashHistory()     //新建 history 对象
			2):   const router = createRouter()              //新建 router 对象
		    3):  引入 TypeScript	 把main.js文件改为main.ts，我们会发现有很多报错
	        报错1：createRouter里面需要传入一个参数，但我们却传入了0个
		    解决方法：
		         const router = createRouter({
				  history,
				  routes: [
				    { path: '/', component: Lifa }
				  ]
				})
			报错2：.vue类型的文件提示cannot find module xxx.vue
			原因ts只能理解.ts为后缀的文件，无法理解.vue文件
			解决方法：
				declare module '*.vue' {
				  import { Component } from 'vue'
				  const component: Component
				  export default component
				}
		这里要注意如果我们用的是vscode这时报错已经没了，但是如果我们用的是webstrom编辑器它还是会报同样的错误，我们需要再额外的安装ts，然后初始化ts配置
				yarn add typescript -D
				tsc --ini
		 4): 使用router
				const app = createApp(App)
				app.use(router)
				app.mount('#app')
		 5):添加
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
		    <template>
			  <div>hi</div>
			  <div>导航栏 |
				    <router-link to="/">lifa</router-link>
				    <router-link to="xxx">lifa2</router-link>
			  </div>
			  <router-view/>
			</template>
			<script>
				export default {
				  name: 'App'
				}
			</script>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
		F:安装sass
		        yarn add sass
		  打开package.json 文件 把dependencies里的sass这一行，移到devDependencies
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
			"dependencies":{
				"vue":"^3.0.0-rc.1",
				"vue-router":"4.0.0-beta.3"
			},
			"devDependencies":{
				"sass":"1.26.10",
				"@vue/compiler-sfc":"^3.0.0-rc.1",
				"vite":"^1.0.0-rc.1"
			}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~	
	     重新运行yarn install		

• 如果项目可以正常启动，即可继续安装vue的辅助工具

npm install vue-router --save （路由管理模块）
npm install vuex --save （状态管理模块）
npm install vue-resource --save （网路请求模块）

二 创建mpvue小程序项目

vue init mpvue/mpvue-quickstart mpvuedemo // 创建mpvue-quickstart的新项目
cd mpvuedemo
npm install // 安装基础模块
npm run dev // 运行