安VUE教程

这段日子店铺如果准备上马为此VUE,安装之历程被就是遇上各种奇葩问题

1.Node.js安装

   https://nodejs.org/en/download/

  安装好noedeJS然后蝉联设置下一致步

3、执行npm install –global vue-cli ,全局安装vue-cli

—-因为默认是从国外服务器下,可以采用阿里巴巴以境内的镜像服务器。

发出通过config命令设置默认下充斥路径:

npm config set registry https://registry.npm.taobao.org 

下一场再实施:

npm install –global vue-cli

4、安装后,检查是不是安装成功

vue -V (在这个注意V为大写)

5、使用vue建一个品类名为“my-project”(vue init webpack
my-project),注意项目名为不能够发大写。

—-注:vue-cli 的模版包括 webpack 和
webpack-simple,前者是比较复杂专业的档次,他的部署并无咸在根目录下的
webpack.config.js 中。

—-webpack-simple 相对简单的,它到底目录下才发只 webpack.config.js。

图片 1

6、注意:

路立过程中,有如下选择,选择NO。(该选项也利用ESLint规范而的代码,一个空格错误都用报错,不打开,避免不必要的累)。

继少宗也单元测试,可以择No.

图片 2

7、项目建好后,目录结构如下:

图片 3

8、安装项目所要因,进入项目被:

npm install

形成后,会发觉项目目录下多来一个node_modules文件夹,里面就 vue-cli
创建的一个根据 webpack 的 vue.js 项目。

图片 4

9、进入项目目录文件夹(my-project)中,就可以采用vue进行开啦

10、使用npm run dev,便足以打开当地服务器实时查看效果(localhost:8080)

使浏览器打开后,没有加载出页面,有或是本土的 8080
端口被挤占,需要修改一下配备文件 config>index.js

图片 5

建议将捧口号改也无常用之端口。另外我还以 build 的门路前缀修改也
‘ ./ ‘(原本也 ‘ / ‘),是因包装之后,外部引入 js 和 css
文件时,如果路径为 ‘ / ‘
开头,在地面是无能为力找到相应文件之(服务器上无问题)。所以一旦急需在本地打开包装后底公文,就得改文件路径。

9、初始效果

图片 6

 

10,退出监听,可以直接Ctrl+C,选择Y。